亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js控制li的隱藏和顯示實例代碼

 更新時間:2016年10月15日 12:03:06   投稿:jingxian  
下面小編就為大家?guī)硪黄猨s控制li的隱藏和顯示實例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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復(fù)制了一個變量,該變量的值可能是[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;
  }

  // 否則就顯示對應(yīng)的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();
    }
  });
}

【效果預(yù)覽】

以上就是小編為大家?guī)淼膉s控制li的隱藏和顯示實例代碼全部內(nèi)容了,希望大家多多支持腳本之家~

相關(guān)文章

  • js與jquery分別實現(xiàn)tab標簽頁功能的方法

    js與jquery分別實現(xiàn)tab標簽頁功能的方法

    這篇文章主要介紹了js與jquery分別實現(xiàn)tab標簽頁功能的方法,結(jié)合實例形式對比分析了javascript與jQuery分別實現(xiàn)tab標簽功能的操作技巧,需要的朋友可以參考下
    2016-11-11
  • js圖片延遲加載(Lazyload)三種實現(xiàn)方式

    js圖片延遲加載(Lazyload)三種實現(xiàn)方式

    這篇文章主要介紹了js延遲加載(Lazyload)三種實現(xiàn)方式,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-03-03
  • Js+Flash實現(xiàn)訪問剪切板操作

    Js+Flash實現(xiàn)訪問剪切板操作

    最近需要遇到了這個問題點擊按鈕復(fù)制鏈接的功能果斷度娘谷哥,最后找到得解決方案ZeroClipBoard一款開源得js+Flash實現(xiàn)得剪切板操作
    2012-11-11
  • 非html5實現(xiàn)js版彈球游戲示例代碼

    非html5實現(xiàn)js版彈球游戲示例代碼

    彈球游戲,一般都是使用html5來實現(xiàn)的,其實不然,使用js也可以實現(xiàn)類似的效果,下面有個不錯的示例,感興趣的朋友可以參考下,希望對大家有所幫助
    2013-09-09
  • Jsonp 關(guān)鍵字詳解及json和jsonp的區(qū)別,ajax和jsonp的區(qū)別

    Jsonp 關(guān)鍵字詳解及json和jsonp的區(qū)別,ajax和jsonp的區(qū)別

    這篇文章主要介紹了Jsonp 關(guān)鍵字詳解及json和jsonp的區(qū)別,ajax和jsonp的區(qū)別 的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • ES6中的class是如何實現(xiàn)的(附Babel編譯的ES5代碼詳解)

    ES6中的class是如何實現(xiàn)的(附Babel編譯的ES5代碼詳解)

    這篇文章主要介紹了ES6中的class是如何實現(xiàn)的?(附Babel編譯的ES5代碼詳解),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • Web開發(fā)必知Javascript技巧大全

    Web開發(fā)必知Javascript技巧大全

     JavaScript是一個絕冠全球的編程語言,可用于Web開發(fā)、移動應(yīng)用開發(fā)(PhoneGap、Appcelerator)、服務(wù)器端開發(fā)(Node.js和Wakanda)等等,通過本文給大家介紹Web開發(fā)必知Javascript技巧大全,需要的朋友參考下吧
    2016-02-02
  • js的Object.assign用法示例分析

    js的Object.assign用法示例分析

    這篇文章主要介紹了js的Object.assign用法,結(jié)合實例形式分析了js Object.assign基本功能、原理、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下
    2020-03-03
  • Json文件格式化方法詳解

    Json文件格式化方法詳解

    JSON 屬于文本,并且我們能夠把任何 JavaScript 對象轉(zhuǎn)換為 JSON,然后將 JSON 發(fā)送到服務(wù)器,這篇文章主要介紹了Json文件格式化方法,需要的朋友可以參考下
    2023-05-05
  • js簡單設(shè)置與使用cookie的方法

    js簡單設(shè)置與使用cookie的方法

    這篇文章主要介紹了js簡單設(shè)置與使用cookie的方法,以簡單實例形式分析了JavaScript設(shè)置與調(diào)用cookie的方法,需要的朋友可以參考下
    2016-01-01

最新評論