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 相关文章推荐
JavaScript 学习技巧
Feb 17 Javascript
javascript之Partial Application学习
Jan 10 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 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加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
培养自己的php编码规范
2015/09/28 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
js charAt的使用示例
2014/02/18 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
用python写的一个wordpress的采集程序
2016/02/27 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
详解Python3注释知识点
2019/02/19 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
师范大学毕业自我鉴定
2013/11/21 职场文书
保险专业求职信
2014/07/07 职场文书
关于召开会议的通知
2015/04/15 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL