Home >Web Front-end >Front-end Q&A >How to hide li in javascript

How to hide li in javascript

藏色散人
藏色散人Original
2022-01-11 14:51:262822browse

How to hide li in javascript: 1. Create an HTML sample file; 2. Define the li tag; 3. Control the hiding and display of li through the js code "function showli(pid){...}" Can.

How to hide li in javascript

The operating environment of this article: Windows 7 system, javascript1.8.5, Dell G3 computer.

How to hide li in javascript?

js control li hiding and displaying example code

html page

<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"/ alt="How to hide li in javascript" ></a>
         </li>
        {/loop}
      </ul>
    </div>
  </div>

js code

function showli(pid){
  var arrnav = ["1", "525", "531","541","60","14"];
  if(pid==&#39;1&#39;){ // 如果是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();
    }
  });
}

[Effect Preview]

How to hide li in javascript

Recommended study: "js Basic Tutorial"

The above is the detailed content of How to hide li in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn