js控制li的隱藏和顯示實(shí)例代碼
更新時(shí)間:2016年10月15日 12:03:06 投稿:jingxian
下面小編就為大家?guī)?lái)一篇js控制li的隱藏和顯示實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
html頁(yè)面
<div class="favorite_list">
<div class="list_type" id="list_type">
<ul class="all">
<li> <a href="javascript:void(0);" onclick="showli(1);">全部(<span class="nums">{$count}</span>)</a></li>
<li> <a href="javascript:void(0);" onclick="showli(60);">鋼琴譜(<span class="nums">{$count_pu}</span>)</a></li>
<li> <a href="javascript:void(0);" onclick="showli(525);">鋼琴曲(<span class="nums">{$count_qu}</span>)</a></li>
<li> <a href="javascript:void(0);" onclick="showli(531);">鋼琴專(zhuān)輯(<span class="nums">{$count_zhuanji}</span>)</a></li>
<li> <a href="javascript:void(0);" onclick="showli(541);">鋼琴全集(<span class="nums">{$count_quanji}</span>)</a></li>
<li> <a href="javascript:void(0);" onclick="showli(14);">鋼琴視頻(<span class="nums">{$count_shipin}</span>)</a></li>
</ul>
</div>
<div class="list_content">
<ul class="navigation" id="navigation">
{loop $info $r}
<li id="t1" class="sl{$r[parentid]}">
<!-- 此處的class復(fù)制了一個(gè)變量,該變量的值可能是[60,525,531,542,14]-->
<a href="{$r[url]}" target="blank"><h3>{$r[title]}</h3></a>
<span class="date">{date("Y-m-d",$r[adddate])}</span>
<a class="delete" href="javascript:void(0)" onclick="ConfirmDel({$r[id]});"><img src="http://www.hqgq.com/statics/www_images/favorite/delete.jpg"/></a>
</li>
{/loop}
</ul>
</div>
</div>
js代碼
function showli(pid){
var arrnav = ["1", "525", "531","541","60","14"];
if(pid=='1'){ // 如果是1就顯示全部的li標(biāo)簽
$("ul.navigation li").show();
return false;
}
// 否則就顯示對(duì)應(yīng)的class="s1"+pid的li標(biāo)簽
$.each(arrnav, function(i, item){
if(item==pid){
$("ul.navigation li.sl"+pid).show();
}else{
$("ul.navigation li.sl"+item).hide();
}
});
}
【效果預(yù)覽】


以上就是小編為大家?guī)?lái)的js控制li的隱藏和顯示實(shí)例代碼全部?jī)?nèi)容了,希望大家多多支持腳本之家~
相關(guān)文章
使用json-server簡(jiǎn)單完成CRUD模擬后臺(tái)數(shù)據(jù)的方法
這篇文章主要介紹了使用json-server簡(jiǎn)單完成CRUD模擬后臺(tái)數(shù)據(jù)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
js AppendChild與insertBefore用法詳細(xì)對(duì)比
本篇文章主要是對(duì)js中AppendChild與insertBefore的用法進(jìn)行了詳細(xì)的對(duì)比。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能
這篇文章主要介紹了在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05
JS獲取iframe中marginHeight和marginWidth屬性的方法
這篇文章主要介紹了JS獲取iframe中marginHeight和marginWidth屬性的方法,涉及javascript操作iframe屬性的技巧,并分析了marginHeight和marginWidth屬性的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
BootStrap智能表單實(shí)戰(zhàn)系列(三)分塊表單配置詳解
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(三)分塊表單配置詳解的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
Bootstrap每天必學(xué)之滾動(dòng)監(jiān)聽(tīng)
Bootstrap每天必學(xué)之滾動(dòng)監(jiān)聽(tīng),對(duì)Bootstrap滾動(dòng)監(jiān)聽(tīng)感興趣的小伙伴們可以參考一下2016-03-03

