<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();
});
但什么都不会发生..
答案 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)
答案 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>