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


Posted in Javascript onOctober 15, 2016

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的隐藏和显示实例代码

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

以上就是小编为大家带来的js控制li的隐藏和显示实例代码全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
详解参数传递四种形式
Jul 21 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 #Javascript
JS常用函数和常用技巧小结
Oct 15 #Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 #Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 #Javascript
原生JS实现的放大镜效果实例代码
Oct 15 #Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 #Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 #Javascript
You might like
php mysql数据库操作类
2008/06/04 PHP
php 移除数组重复元素的一点说明
2008/11/27 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
利用JS实现数字增长
2016/07/28 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
json跨域调用python的方法详解
2017/01/11 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
详解python中的异常和文件读写
2021/01/03 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
美国翻新电子产品商店:The Store
2019/10/08 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
什么是属性访问器
2015/10/26 面试题
生产部岗位职责范文
2014/02/07 职场文书
餐厅总厨求职信
2014/03/04 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
一文弄懂MySQL索引创建原则
2022/02/28 MySQL