Question

<div id="product">
<ul id="shop">
<li> Vision </li>
<li class="active">Type</li>
<li> Energy</li>
</ul>
</div>

我想只显示有效的li标签，而其他li标签则会隐藏。

例外输出

类型

我试试javascript

$( document ).ready(function() { 
          $('#shop li.active').show();
            });

但什么都不会发生..

Answer 1

我想只显示有效的li标签，而其他li标签则会隐藏。

隐藏兄弟姐妹

 $('#shop li.active').show().siblings().hide();

<强>演示

$(document).ready(function() {
  $('#shop li.active').show().siblings().hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
  <ul id="shop">
    <li> Vision </li>
    <li class="active">Type</li>
    <li> Energy</li>
  </ul>
</div>

但什么都不会发生..

由于没有隐藏li的逻辑，只显示它们。如上所示，您需要显示active个并隐藏其余部分。

Answer 2

你必须添加一点css，默认隐藏li标签

ul li{
  display:none
}

https://jsfiddle.net/jzj6o5ms/1/

Answer 3

使用jQuery，您需要隐藏哪些不活动

$(document).ready(function() {
  $('#shop li:not(.active)').hide();
  $('#shop li.active').show();
});

也可以使用CSS完成

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

Answer 4

您可以使用.not＆amp; hide

$(document).ready(function() {
  $('li').not('.active').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
  <ul id="shop">
    <li> Vision </li>
    <li class="active">Type</li>
    <li> Energy</li>
  </ul>
</div>

在javascript中隐藏和显示li活动标签

4 个答案: