仿阿里巴巴分塊導(dǎo)航代碼
來(lái)源：易賢網(wǎng) 閱讀：1509 次 日期：2014-08-13 16:28:17
溫馨提示：易賢網(wǎng)小編為您整理了“仿阿里巴巴分塊導(dǎo)航代碼”,方便廣大網(wǎng)友查閱！

仿阿里巴巴的顯示導(dǎo)航代碼

<!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"> 

/*這里定義樣式,由于左右滑動(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(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">注冊(cè)會(huì)員</a></li>

   <li class="r"><a 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 class="btn_tggs">推廣公司</a></li>

   <li class="r"><a 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 class="btn_xzmj">尋找買家</a></li>

   <li class="r"><a 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>S

更多信息請(qǐng)查看IT技術(shù)專欄

更多信息請(qǐng)查看腳本欄目
易賢網(wǎng)手機(jī)網(wǎng)站地址：仿阿里巴巴分塊導(dǎo)航代碼
由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

2025國(guó)考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào)：滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào)：云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證：（云）人服證字（2023）第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào)：hfpxwx
咨詢QQ：526150442（9:00—18:00）版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)