在JavaScript中隐藏并显示LI主动标签

Question

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

我只想显示活动的LI标签，而其他LI标签将被隐藏。

ectected输出将为

类型

我尝试javascript

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

，但什么都不会发生。

Answer 1

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

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

也可以使用CSS和

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

Answer 2

我只想显示活动的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 3

您必须添加一点CSS，默认情况下将隐藏LI标签

ul li{
  display:none
}

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

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>