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

 更新时间:2016年10月15日 12:03:06   投稿:jingxian  
下面小编就为大家带来一篇js控制li的隐藏和显示实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

html页面

<div class="favorite_list">
    <div class="list_type" id="list_type">
      <ul class="all">
       <li>&nbsp;<a href="javascript:void(0);" onclick="showli(1);">全部(<span class="nums">{$count}</span>)</a></li>
       <li>&nbsp;<a href="javascript:void(0);" onclick="showli(60);">钢琴谱(<span class="nums">{$count_pu}</span>)</a></li>
       <li>&nbsp;<a href="javascript:void(0);" onclick="showli(525);">钢琴曲(<span class="nums">{$count_qu}</span>)</a></li>
       <li>&nbsp;<a href="javascript:void(0);" onclick="showli(531);">钢琴专辑(<span class="nums">{$count_zhuanji}</span>)</a></li>
       <li>&nbsp;<a href="javascript:void(0);" onclick="showli(541);">钢琴全集(<span class="nums">{$count_quanji}</span>)</a></li>
       <li>&nbsp;<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与jquery分别实现tab标签页功能的方法

    js与jquery分别实现tab标签页功能的方法

    这篇文章主要介绍了js与jquery分别实现tab标签页功能的方法,结合实例形式对比分析了javascript与jQuery分别实现tab标签功能的操作技巧,需要的朋友可以参考下
    2016-11-11
  • js图片延迟加载(Lazyload)三种实现方式

    js图片延迟加载(Lazyload)三种实现方式

    这篇文章主要介绍了js延迟加载(Lazyload)三种实现方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • Js+Flash实现访问剪切板操作

    Js+Flash实现访问剪切板操作

    最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥,最后找到得解决方案ZeroClipBoard一款开源得js+Flash实现得剪切板操作
    2012-11-11
  • 非html5实现js版弹球游戏示例代码

    非html5实现js版弹球游戏示例代码

    弹球游戏,一般都是使用html5来实现的,其实不然,使用js也可以实现类似的效果,下面有个不错的示例,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-09-09
  • Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别

    Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别

    这篇文章主要介绍了Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别 的相关资料,需要的朋友可以参考下
    2015-12-12
  • ES6中的class是如何实现的(附Babel编译的ES5代码详解)

    ES6中的class是如何实现的(附Babel编译的ES5代码详解)

    这篇文章主要介绍了ES6中的class是如何实现的?(附Babel编译的ES5代码详解),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Web开发必知Javascript技巧大全

    Web开发必知Javascript技巧大全

     JavaScript是一个绝冠全球的编程语言,可用于Web开发、移动应用开发(PhoneGap、Appcelerator)、服务器端开发(Node.js和Wakanda)等等,通过本文给大家介绍Web开发必知Javascript技巧大全,需要的朋友参考下吧
    2016-02-02
  • js的Object.assign用法示例分析

    js的Object.assign用法示例分析

    这篇文章主要介绍了js的Object.assign用法,结合实例形式分析了js Object.assign基本功能、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2020-03-03
  • Json文件格式化方法详解

    Json文件格式化方法详解

    JSON 属于文本,并且我们能够把任何 JavaScript 对象转换为 JSON,然后将 JSON 发送到服务器,这篇文章主要介绍了Json文件格式化方法,需要的朋友可以参考下
    2023-05-05
  • js简单设置与使用cookie的方法

    js简单设置与使用cookie的方法

    这篇文章主要介绍了js简单设置与使用cookie的方法,以简单实例形式分析了JavaScript设置与调用cookie的方法,需要的朋友可以参考下
    2016-01-01

最新评论