这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 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();
- }
- });
- }
【效果预览】
来源: http://www.phperz.com/article/17/0708/331160.html