<STYLE type=text/css> .nTab{ float: left; width: auto; margin: 0 auto; border-bottom:1px #AACCEE solid; background:#d5d5d5; background-position:left; background-repeat:repeat-y; margin-bottom:0px; } .nTab .TabTitle{ clear: both; height: 20px; overflow: hidden; } .nTab .TabTitle ul{ border:0; margin:0; padding:0; } .nTab .TabTitle li{ float: left; width: 80px; font-size: 12px; cursor: pointer; padding-top: 5px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; list-style-type: none; } .nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;} .nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;} .nTab .TabContent{ width:auto;border: 1px solid #99CCFF; background-color: #E8EFFF; margin: 0px auto; padding:10px 0 0 0; border-right:1px #AACCEE solid;border-left:1px #AACCEE solid; } .none {display:none;} </STYLE> <script type="text/javascript"> function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); 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> <div align="center" style="padding-left:0px;"> <div class="nTab" style=width:253px> <div class="TabTitle"> <ul id="myTab1"> <li class="active" onmouseover="nTabs(this,0);">壹家怡园</li> <li class="normal" onmouseover="nTabs(this,1);">永春</li> <li class="normal" onmouseover="nTabs(this,2);">泉州</li> </ul> </div> <div class="TabContent" style=height=210px> <div id="myTab1_Content0">壹家怡园内容</div> <div id="myTab1_Content1" class="none">永春内容</div> <div id="myTab1_Content2" class="none">泉州内容</div> </div> </div> </div> 多个要将myTab1和myTab1_Content2改掉onmouseover改为onclick则点击触发。
|