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

时间:2018-02-22 12:10:54

标签: javascript

<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();
            });

但什么都不会发生..

4 个答案:

答案 0 :(得分:0)

  

我想只显示有效的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个并隐藏其余部分。

答案 1 :(得分:0)

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

ul li{
  display:none
}

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

答案 2 :(得分:0)

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

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

也可以使用CSS完成

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

答案 3 :(得分:0)

您可以使用.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>