在javascript中隐藏和显示li active标签

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的active并隐藏其余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和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>