蚂蚁论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 40|回复: 0

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

[复制链接]

1979

主题

1

好友

1609

积分

管理员

Rank: 64Rank: 64Rank: 64Rank: 64

  • TA的每日心情
    奋斗
    2016-1-22 16:23
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    荣誉管理 论坛元老 热心会员 活跃会员 最佳新人 灌水之王

    发表于 2017-10-12 20:30:42 |显示全部楼层
    js控制li的隐藏和显示实例代码
    html页面


    lt;div class="favorite_list"gt;
        lt;div class="list_type" id="list_type"gt;
          lt;ul class="all"gt;
           lt;ligt;lt;a href="javascript:void(0);" onclick="showli(1);"gt;全部(lt;span class="nums"gt;{$count}lt;/spangt;)lt;/agt;lt;/ligt;
           lt;ligt;lt;a href="javascript:void(0);" onclick="showli(60);"gt;钢琴谱(lt;span class="nums"gt;{$count_pu}lt;/spangt;)lt;/agt;lt;/ligt;
           lt;ligt;lt;a href="javascript:void(0);" onclick="showli(525);"gt;钢琴曲(lt;span class="nums"gt;{$count_qu}lt;/spangt;)lt;/agt;lt;/ligt;
           lt;ligt;lt;a href="javascript:void(0);" onclick="showli(531);"gt;钢琴专辑(lt;span class="nums"gt;{$count_zhuanji}lt;/spangt;)lt;/agt;lt;/ligt;
           lt;ligt;lt;a href="javascript:void(0);" onclick="showli(541);"gt;钢琴全集(lt;span class="nums"gt;{$count_quanji}lt;/spangt;)lt;/agt;lt;/ligt;
           lt;ligt;lt;a href="javascript:void(0);" onclick="showli(14);"gt;钢琴视频(lt;span class="nums"gt;{$count_shipin}lt;/spangt;)lt;/agt;lt;/ligt;
          lt;/ulgt;
        lt;/divgt;

        lt;div class="list_content"gt;
          lt;ul class="navigation" id="navigation"gt;
            {loop $info $r}
            lt;li id="t1" class="sl{$r[parentid]}"gt;


             lt;!-- 此处的class复制了一个变量,该变量的值可能是[60,525,531,542,14]-


             lt;a href="{$r[url]}" target="blank"gt;lt;h3gt;{$r[title]}lt;/h3gt;lt;/agt;
             lt;span class="date"gt;{date("Y-m-d",$r[adddate])}lt;/spangt;
             lt;a class="delete" href="javascript:void(0)" onclick="ConfirmDel({$r[id]});"gt;lt;img src="hqgq/statics/_images/favorite/deletejpg"/gt;lt;/agt;
             lt;/ligt;
            {/loop}
          lt;/ulgt;
        lt;/divgt;
      lt;/divgt;


    js代码


    function showli(pid){
      var arrnav = ["1", "525", "531","541","60","14"];
      if(pid=='1'){ // 如果是1就显示全部的li标签
        $("ulnavigation li")show();
        return false;
      }

      // 否则就显示对应的class="s1"+pid的li标签


      $each(arrnav, function(i, item){
        if(item==pid){
          $("ulnavigation lisl"+pid)show();
        }else{
          $("ulnavigation lisl"+item)hide();
        }
      });
    }

    【效果预览】


    以上就是小编为大家带来的js控制li的隐藏和显示实例代码全部内容了,希望大家多多~
    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    蚂蚁站长论坛推荐上一条 /1 下一条

    QQ|Archiver|手机版|广告服务|蚂蚁站长-站长之家 ( 黔ICP备16008478号-1  

    GMT+8, 2017-10-23 06:48

    Powered by 站长论坛

    © 2007-2013 Jzant.com Inc.

    回顶部