萬盛學電腦網 >> 腳本專題 >> javascript >> js/jQuery簡單實現選項卡功能
js/jQuery簡單實現選項卡功能
本篇文章主要是對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 +")"javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved