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

前端之家收集整理的这篇文章主要介绍了js控制li的隐藏和显示实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

html页面

)
  • )
  • )
  • )
  • )
  • )
  • <div class="list_content"&gt;
      <ul class="navigation" id="navigation"&gt;
        {loop $info $r}
        <li id="t1" class="sl{$r[parentid]}"&gt;
    
    
         <!-- 此处的class复制了一个变量,该变量的值可能是[60,525,531,542,14]-->
    
    
         <a href="{$r[url]}" target="blank"&gt;<h3>{$r[title]}</h3></a>
         <span class="date"&gt;{date("Y-m-d",$r[adddate])}</span>
         <a class="delete" href="javascript:void(0)" onclick="ConfirmDel({$r[id]});"&gt;<p class="pic_center"><img src="http://www.hqgq.com/statics/www_images/favorite/delete.jpg"/&gt;</a></p>
         </li>
        {/loop}
      </ul>
    </div>

    js代码

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

    猜你在找的JavaScript相关文章