本文實例為大家分享了js選項卡切換的具體代碼，可以手動切換，另設置定時器可使其自動切換，供大家參考，具體內容如下
效果如圖：
具體代碼：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style type="text/css"> *{ margin: 0; padding: 0; font-size: 12px; font-family: "微軟雅黑"; color: #000000; text-decoration: none; list-style-type: none; } #tab-list{ width: 275px; height: 190px; margin: 30px auto; } #list{ height: 32px; border-bottom: #8B4513 2px solid; } #list li{ display: inline-block; width: 60px; border: 1px solid #999999; border-bottom: none; line-height: 30px; margin-left: 5px; text-align: center; cursor: pointer; } #list .active{ border-top: 2px solid #8B4513; border-bottom: 2px solid #fff; } #tab-list div{ border: 1px solid #7396B8; border-top: none; } #tab-list div li{ height: 30px; line-height: 30px; text-indent: 8px; } #tab-list .show{ display: block; } #tab-list .hidden{ display: none; }</style><script type="text/javascript"> window.onload=function(){ var tab=document.getElementById('tab-list'); var list=document.getElementById('list').getElementsByTagName('li'); var div=tab.getElementsByTagName('div'); var timer=null; var index=0; for(var i=0;i<list.length;i++){ list[i].num=i; list[i].onmouseover=function(){ Change(this.num); } } function Change(curIndex){ for(var i=0;i<list.length;i++){ list[i].className=""; div[i].className="hidden"; } list[curIndex].className="active"; div[curIndex].className="show"; index=curIndex; } //自動播放 function autoPlay(){ timer=setInterval(function(){ index++; if(index > list.length - 1){ index=0; } Change(index); },2000); } autoPlay(); tab.onmouseover=function(){ clearInterval(timer); } tab.onmouseout=function(){ autoPlay(); } }</script><body><div id="tab-list"> <ul id="list"> <li class="active">房產</li><li>家居</li><li>二手房</li> </ul> <div class="show"> <ul> <li><a href="javascript:;">275萬購昌平鄰鐵三居 總價20萬買一居</a></li> <li><a href="javascript:;">200萬內購五環三居 140萬安家東三環</a></li> <li><a href="javascript:;">北京首現零首付樓盤 53萬購東5環50平</a></li> <li><a href="javascript:;">京樓盤直降5000 中信府 公園樓王現房</a></li> </ul> </div> <div class="hidden"> <ul> <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窩</a></li> <li><a href="javascript:;">經典清新簡歐愛家 90平老房煥發新生</a></li> <li><a href="javascript:;">新中式的酷色溫情 66平撞色活潑家居</a></li> <li><a href="javascript:;">瓷磚就像選好老婆 衛生間煙道的設計</a></li> </ul> </div> <div class="hidden"> <ul> <li><a href="javascript:;">通州豪華3居260萬 二環稀缺2居250w甩</a></li> <li><a href="javascript:;">西3環通透2居290萬 130萬2居限量搶購</a></li> <li><a href="javascript:;">黃城根小學學區僅260萬 121平70萬拋!</a></li> <li><a href="javascript:;">獨家別墅280萬 蘇州橋2居優惠價248萬</a></li> </ul> </div></div></body></html>如果大家還想深入學習，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
