javascript+div樣式的自定義tab選項卡
阿新 • • 發佈：2019-01-08
需求：進入頁面以div樣式的選項卡顯示，預設顯示第一個，滑鼠移上事件（也可以更換為滑鼠點選事件）進行切換選項卡
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <style type="text/css"> .news{ width:324px; margin-left:8px; border:1px solid #0973b2; padding:1px; height:269px; min-height:269px; background-color:#fff;} .news_tit{ background: url(../images/hd.gif) repeat-x; height:33px; line-height:33px;overflow:hidden;color:#FF0066; position:relative; font-size:14px; padding-left:10px; font-weight:bold;} .none {display:none;} .more{ font-size:12px; font-weight:normal; position:absolute; right:9px; top: 0px; } .tab2new div.active{ width:80px; height:34px; line-height:34px; background-color:#d3e8ff; } .tab2new div.active a{color:#0472bf;} .tab2new div{ float: left;width:80px; text-align:center; height:26px; line-height:34px;} .tab2new div a{color:#400040;} .l{ float:left} .r{ float:right} .clear{ clear:both;} </style> <script type="text/javascript"> <!-- // JavaScript Document function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("div"); for(i=0; i <tabList.length; i++) { if (i == Num) { thisObj.className = "active"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ tabList[i].className = "normal"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } //--> </script> <body> <!--news--> <div class="news l"> <div class="news_tit"> <ul id="myTab2" class="tab2new"> <div class="active" onmouseover="nTabs(this,0);"> <a target="_blank" href="#"><span>通知公告</span></a> </div> <div class="normal" onmouseover="nTabs(this,1);"> <a target="_blank" href="#"><span>中心動態</span></a> </div> <div class="normal" onmouseover="nTabs(this,2);"> <a target="_blank" href="#"><span>要聞速遞</span></a> </div> </ul> </div> <!-- <div class="clear"></div> --> <!--通知公告--> <div id="myTab2_Content0"> <ul class="list_1" style="height: 150px"> <div class="c1-body"> <div class="" style="padding:3px 0px;"> <div class="f-left" style="float:left;"> · <a href="" target="_blank">111</a> </div> <div class="clear"></div> </div> </div> <div class="c1-body"> <div class="" style="padding:3px 0px;"> <div class="f-left" style="float:left;"> · <a href="#" title="通告" target="_blank">111</a> </div> <div class="clear"></div> </div> </div> </ul> </div> <!--中心動態--> <div id="myTab2_Content1" class="none"> <ul class="list_1" style="height: 150px"> <div class="c1-body"> <div class="" style="padding:3px 0px;"> <div class="f-left" style="float:left;"> · <a href="#" title="2222" target="_blank">2222</a> </div> <div class="clear"></div> </div> </div> <div class="c1-body"> <div class="" style="padding:3px 0px;"> <div class="f-left" style="float:left;"> · <a href="#" target="_blank">222</a> </div> <div class="clear"></div> </div> </div> </ul> </div> <!-- 要聞速遞 --> <div id="myTab2_Content2" class="none"> <ul class="list_1" style="height: 150px"> <div class="c1-body"> <div class="" style="padding:3px 0px;"> <div class="f-left" style="float:left;"> · <a href="#" title="3333" target="_blank">3333</a> </div> <div class="clear"></div> </div> </div> <div class="c1-body"> <div class="" style="padding:3px 0px;"> <div class="f-left" style="float:left;"> · <a href="#" target="_blank">3333</a> </div> <div class="clear"></div> </div> </div> </ul> </div> </div> <!--news end--> </body> </html>