js控制li的隐藏和显示实例代码

html页面

<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）;">钢琴专辑（<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复制了一个变量，该变量的值可能是[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标签$（"ul.navigation li"）.show（）;return false;}// 否则就显示对应的class="s1"+pid的li标签$.each（arrnav, function（i, item）{if（item==pid）{$（"ul.navigation li.sl"+pid）.show（）;}else{$（"ul.navigation li.sl"+item）.hide（）;}  }）;}

【效果预览】

以上就是小编为大家带来的js控制li的隐藏和显示实例代码全部内容了，希望大家多多支持脚本之家~