Question

我正在使用无法控制其CSS输出标签的过滤器系统。

过滤器将所有内容输出到列表中，并使用“活动”类标记突出显示“选定”项。这用于突出显示该列表项。

我要实现的是，当所有内容都按如下所示设置时。但是只要一激活，其余的就使用display：none隐藏。

<ul> 
  <li class="normal">1 Display</li>
  <li class="normal">2 Display</li>
  <li class="normal">3 Display</li>
  <li class="normal">4 Display</li>
  <li class="normal">5 Display</li>
<ul>

1个显示
2个显示
3个显示
4个显示
5个显示

将转向：

<ul> 
  <li class="normal">1 Display</li>
  <li class="normal">2 Display</li>
  <li class="normal">3 Display</li>
  <li class="normal active">4 Display</li>
  <li class="normal">5 Display</li>
<ul>

4个显示

Css类似于

li:not(.active){
  display:none; 
}

但是，这仅在某个活动对象处于活动状态时才生效，但只有在存在.active时才具有变量才能使其运行。

Answer 1

您可以使用javascript做到这一点。

var li = document.getElementsByTagName("li");
var active= 0;
for (var i = 0; i < li.length; i++) {
    if (li[i].className == 'normal active') {
        li[i].style.display = 'block';
        active = 1;
    }else{
        li[i].style.display = 'none';
    }      
}
if(active == 0){
 for (var i = 0; i < li.length; i++) {
   li[i].style.display = 'block';
 }
}

只有在另一个元素应用了不同的类时，才有CSS唯一的方法来隐藏元素吗？

1 个答案: