js/jQuery簡單實現選項卡功能

來源:互聯網
上載者:User

 本篇文章主要是對js/jQuery簡單實現選項卡功能的範例程式碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所協助

第一種方法是用原生的js代碼如下:  代碼如下:<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>簡單選項卡</title>    <style type="text/css">    body,ul,li{margin:0;padding:0;}    body{font:12px/1.5 Tahoma;}    #outer{width:450px;margin:10px auto;}    #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}    #tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}    #tab li.current{color:#000;background:#ccc;}    #content{border:1px solid #000;border-top-width:0;}    #content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}    </style>    <script type="text/javascript">      window.onload = function ()      {          var oLi = document.getElementById("tab").getElementsByTagName("li");          var oUl = document.getElementById("content").getElementsByTagName("ul");          for(var i = 0; i < oLi.length; i++)          {              oLi[i].index = i;              oLi[i].onmouseover = function (){                  for(var n = 0;n < oLi.length;n++)                  {                      oLi[n].className = "";                      this.className = "current";                  }                      for(var n = 0;n <oUl.length;n++)                      {                          oUl[n].style.display = "none";                          oUl[this.index].style.display="block";                       }              }          }      }     </script>     </head><body><div id="outer"><ul id="tab">    <li class="current">科技</li>    <li>旅遊</li>    <li>娛樂</li></ul><div id="content">    <ul style="display:block;">        <li>宏碁R7雙轉軸變形本評測:觸摸板設計過於另類(圖)</li>        <li> 超薄加防水 索尼Xperia Tablet Z平板電腦評測</li>        <li>諾基亞Lumia 925評測 最好的WP8智能手機</li>        <li> 聯想IdeaPad S405評測 效能主流續航待提升</li>        <li>小辣椒M2智能手機評測: 再不換殼我們就該老了</li>        <li>聯想K900內部構造 看國產神器多少國產貨(組圖)</li>        <li>聯想K900內部構造 看國產神器多少國產貨(組圖)</li>        <li>網頁換膚效果</li>        <li>聯想K900內部構造 看國產神器多少國產貨(組圖)</li>    </ul>    <ul>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>     </ul>    <ul>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>    </ul></div></div> </body></html>  第二種方法是用jQuery實現,代碼比第一種簡潔代碼如下:<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>簡單選項卡</title>    <style type="text/css">    body,ul,li{margin:0;padding:0;}    body{font:12px/1.5 Tahoma;}    #outer{width:450px;margin:10px auto;}    #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}    #tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}    #tab li.current{color:#000;background:#ccc;}    #content{border:1px solid #000;border-top-width:0;}    #content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}    </style>    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>    <script type="text/javascript">     $(function(){            var timeid;          $("#tab").find("li").each(function(index){              var sLi=$(this);              sLi.mouseenter(function(){                  timeid= setTimeout(function(){                      sLi.addClass("current").siblings().removeClass("current");                      sLi.parent().next().find("ul:eq(" + index +")").show().siblings().hide() ;                 },300);              }).mouseleave(function(){                     clearTimeout(timeid);                      })           })        })     </script>     </head><body><div id="outer"><ul id="tab">    <li class="current">科技</li>    <li>旅遊</li>    <li>娛樂</li></ul><div id="content">    <ul style="display:block;">        <li>宏碁R7雙轉軸變形本評測:觸摸板設計過於另類(圖)</li>        <li> 超薄加防水 索尼Xperia Tablet Z平板電腦評測</li>        <li>諾基亞Lumia 925評測 最好的WP8智能手機</li>        <li> 聯想IdeaPad S405評測 效能主流續航待提升</li>        <li>小辣椒M2智能手機評測: 再不換殼我們就該老了</li>        <li>聯想K900內部構造 看國產神器多少國產貨(組圖)</li>        <li>聯想K900內部構造 看國產神器多少國產貨(組圖)</li>        <li>網頁換膚效果</li>        <li>聯想K900內部構造 看國產神器多少國產貨(組圖)</li>    </ul>    <ul>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>        <li>愛上西雅圖,美國全景遊精選推薦 </li>     </ul>    <ul>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>        <li>李安宣布辭拍美劇《暴君》:需要休息</li>    </ul></div></div> </body></html>  第一種方法用原生的js是借鑒與別人的方法,第二種是我在第一個方法的基礎上編寫的。。。
相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。