代碼簡(jiǎn)介：來(lái)自阿里巴巴網(wǎng)的滑動(dòng)TAB導(dǎo)航特效
代碼內(nèi)容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xmlns=">來(lái)自阿里巴巴網(wǎng)的滑動(dòng)TAB導(dǎo)航特效_網(wǎng)頁(yè)代碼站(type="text/css"> /*這里定義樣式,由于左右滑動(dòng)區(qū)寬度不同,所以代碼略多*/ body {margin:0px;border:0px;font-size:12px;background-color:#fff;} a:link{color: #003278;text-decoration: none;} a:visited{color: #003278;text-decoration: none;} a:hover{color: #FF6600;text-decoration: underline;} #slideBox{background:url(;} #slide{padding-top:5px} #slide li img{margin-right:3px} #slideBox ul{padding:0;margin:0;clear:both;list-style:none;overflow:hidden} #slideBox li{float:left;font-weight:bold;height:37px !important;height:27px;} #slideBox li a:link,#slideBox li a:visited{color:#000;} #slideBox li a:hover{color:#ff7300;text-decoration: none} #slideBox .l{background:url(;} #slideBox .r{background:url(} #slideBox .l_h{background:url(;} #slideBox .r_h{background:url(;} #slideBox .hide{display:none} #slideBox .l a{width:52px;} #slideBox .r a{width:68px;} .arrow{padding-left:8px;background:url() no-repeat;} #slideBox .l a,#slideBox .r a,#slideBox .l_h a,#slideBox .r_h a{padding-left:24px;display:block;height:100%;padding-top:10px;} .btn_zchy{background:url() 5px 10px no-repeat;} .btn_cxt{background:url() 5px 10px no-repeat;} .btn_tggs{background:url() 5px 10px no-repeat;} .btn_fbxx{background:url() 5px 10px no-repeat;} .btn_xzmj{background:url() 5px 10px no-repeat;} .btn_alisoft{background:url() 5px 10px no-repeat;} /*cont*/ #slideBox .cont_l{float:left;background:url(7px 7px 14px;margin-bottom:4px;overflow:hidden} #slideBox .cont_r{float:left;background:url(7px 7px 14px;margin-bottom:4px;overflow:hidden} #slideBox .oneline{line-height:33px;} </style></head><body style="text-align:center"><br /><br /><!--slidebox start--><div id="slideBox"><div id="slide"> <ul> <li class="l_h"><a href="" class="btn_zchy">注冊(cè)會(huì)員</a></li> <li class="r"><a href="" class="btn_cxt">加入誠(chéng)信通</a></li> </ul> <div class="cont_l" id="sc_1">內(nèi)容一 </div> <div class="hide" id="sc_2">內(nèi)容二 </div> <ul> <li class="l"><a href="" class="btn_tggs">推廣公司</a></li> <li class="r"><a href="" class="btn_fbxx">發(fā)布信息</a></li> </ul> <div class="hide" id="sc_3">內(nèi)容三 </div> <div class="hide" id="sc_4"> 內(nèi)容四</div> <ul> <li class="l"><a href="" class="btn_xzmj">尋找買家</a></li> <li class="r"><a href="" class="btn_alisoft">阿里軟件</a></li> </ul> <div class="hide" id="sc_5"> 內(nèi)容五 </div> <div class="hide" id="sc_6"> 內(nèi)容六 </div></div> </div><!--slidebox end--><script type="text/javascript">/*alitab author:alicn-wd-ym 這里是所有js實(shí)現(xiàn),代碼比較少,主要還是取巧,利用了classname的關(guān)系 */ var slideTabIndex=1; var sTabList = document.getElementById("slideBox").getElementsByTagName("li"); for(var i=0;i<sTabList.length;i++){ var obj = sTabList[i].getElementsByTagName("a")[0]; sTabList[i].getElementsByTagName("a")[0].id="slideBtn_"+(i+1); if (obj.addEventListener) { obj.addEventListener( "mouseover", overSlide, false ); } else if (obj.attachEvent) { obj.attachEvent( "onmouseover", overSlide ); } } function overSlide(e){ e = window.event || e; var srcElement = e.srcElement || e.target; var newTabIndex=srcElement.id.replace("slideBtn_",""); var pos = srcElement.parentNode.className; if(newTabIndex==""||pos.indexOf("_h")!=-1)return; document.getElementById("slideBtn_"+slideTabIndex).parentNode.className=document.getElementById("slideBtn_"+slideTabIndex).parentNode.className.replace("_h",""); document.getElementById("sc_"+slideTabIndex).className="hide"; document.getElementById("sc_"+newTabIndex).className="cont_"+pos; srcElement.parentNode.className = pos+"_h"; slideTabIndex=newTabIndex; } <!--slidebox end--></script></body></html><br><p><a href="">網(wǎng)頁(yè)代碼站</a> - 最專業(yè)的代碼下載網(wǎng)站 - 致力為中國(guó)站長(zhǎng)提供有質(zhì)量的代碼！</p>
更多信息請(qǐng)查看IT技術(shù)專欄
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試