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的隐藏和显示实例代码全部内容了,希望大家多多支持脚本之家~

相关文章

  • this[] 指的是什么内容 讨论

    this[] 指的是什么内容 讨论

    this[] 指的是什么内容 讨论...
    2007-03-03
  • javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)

    javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)

    在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,本文就介绍了很多javascript鼠标跟随运动,在这里与大家分享下。
    2016-10-10
  • 不错的asp中显示新闻的功能

    不错的asp中显示新闻的功能

    不错的asp中显示新闻的功能...
    2006-10-10
  • JS二叉树的简单实现方法示例

    JS二叉树的简单实现方法示例

    这篇文章主要介绍了JS二叉树的简单实现方法,结合具体实例形式分析了基于javascript定义二叉树及二叉树节点的遍历、查找、添加、删除及运算相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • JavaScript制作颜色反转小游戏

    JavaScript制作颜色反转小游戏

    本文给大家分享的是一个JavaScript实现的颜色反转的小游戏的源码,非常的简单好玩,有需要的小伙伴可以参考下
    2016-09-09
  • JS图片懒加载的优点及实现原理

    JS图片懒加载的优点及实现原理

    这篇文章主要介绍了JS图片懒加载的优点及实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • JavaScript中数组遍历的7种方法小结

    JavaScript中数组遍历的7种方法小结

    作为JavaScript开发人员,熟悉数组的遍历和操作是非常重要的,数组遍历是处理和操作数组元素的基本需求之一,本文将介绍JavaScript中的7种常见数组遍历方法,帮助你成为数组操作的达人
    2023-11-11
  • 前端性能优化建议

    前端性能优化建议

    这篇文章主要分享了一些前端性能优化的建议,帮助大家提高页面性能,感兴趣的朋友可以了解下
    2020-09-09
  • 微信小程序“摇一摇”的实例代码

    微信小程序“摇一摇”的实例代码

    微信小程序并没有提供摇一摇API接口,但是提供了一个重力感应的API,接下来我们可以用这个方法来模拟微信摇一摇功能,具体实现代码,大家参考下本文
    2017-07-07
  • js实现超级玛丽小游戏

    js实现超级玛丽小游戏

    这篇文章主要为大家详细介绍了js实现超级玛丽小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03

最新评论