仿阿里巴巴的顯示導航代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312">
<style type="text/css">
/*這里定義樣式,由于左右滑動區(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(http://img.china.alibaba.com/images/cn/home/0110/slideBox_bg.gif);height:168px;width:178px;padding-left:5px;padding-right:5px;}
#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(http://img.china.alibaba.com/images/cn/home/0110/slideBox_tableft.gif);width:80px;}
#slideBox .r{background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_tabright.gif);width:94px;float:right}
#slideBox .l_h{background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_tableft_h.gif);width:80px;}
#slideBox .r_h{background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_tabright_h.gif);width:94px;float:right;}
#slideBox .hide{display:none}
#slideBox .l a{width:52px;}
#slideBox .r a{width:68px;}
.arrow{padding-left:8px;background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_arrow03_right_08x.gif) 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(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_zchy01_12x.gif) 5px 10px no-repeat;}
.btn_cxt{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_cxt01_12x.gif) 5px 10px no-repeat;}
.btn_tggs{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_tggs01_12x.gif) 5px 10px no-repeat;}
.btn_fbxx{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_fbxx01_12x.gif) 5px 10px no-repeat;}
.btn_xzmj{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_xzmj01_12x.gif) 5px 10px no-repeat;}
.btn_alisoft{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_alisoft01_12x.gif) 5px 10px no-repeat;}
/*cont*/
#slideBox .cont_l{float:left;background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_conleft.gif);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden}
#slideBox .cont_r{float:left;background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_conright.gif);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden}
#slideBox .oneline{line-height:33px;}
</style>
<!--slidebox start-->
<div id="slideBox">
<div id="slide">
<ul>
<li class="l_h"><a class="btn_zchy">注冊會員</a></li>
<li class="r"><a class="btn_cxt">加入誠信通</a></li>
</ul>
<div class="cont_l" id="sc_1">
內容一
</div>
<div class="hide" id="sc_2">
內容一
</div>
<ul>
<li class="l"><a class="btn_tggs">推廣公司</a></li>
<li class="r"><a class="btn_fbxx">發(fā)布信息</a></li>
</ul>
<div class="hide" id="sc_3">
內容一
</div>
<div class="hide" id="sc_4">
內容一
</div>
<ul>
<li class="l"><a class="btn_xzmj">尋找買家</a></li>
<li class="r"><a class="btn_alisoft">阿里軟件</a></li>
</ul>
<div class="hide" id="sc_5">
內容一
</div>
<div class="hide" id="sc_6">
內容一
</div>
</div>
</div>
<!--slidebox end-->
<script type="text/javascript">
/*alitab
author:alicn-wd-ym
這里是所有js實現,代碼比較少,主要還是取巧,利用了classname的關系
*/
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>S
更多信息請查看IT技術專欄
版權所有:易賢網
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試