网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 仿阿里巴巴分块导航代码
内容
    仿阿里巴巴的显示导航代码
    <!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"> 
    /*这里定义样式,由于左右滑动区宽度不同,所以代码略多*/ 
    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(/uploads/202504/02/slideBox_bg3647.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(/uploads/202504/02/slideBox_tableft3647.gif);width:80px;} 
    #slideBox .r{background:url(/uploads/202504/02/slideBox_tabright3647.gif);width:94px;float:right} 
    #slideBox .l_h{background:url(/uploads/202504/02/slideBox_tableft_h3647.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(/uploads/202504/02/icon_arrow03_right_08x3647.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(/uploads/202504/02/icon_zchy01_12x3647.gif) 5px 10px no-repeat;} 
    .btn_cxt{background:url(/uploads/202504/02/icon_cxt01_12x3647.gif) 5px 10px no-repeat;} 
    .btn_tggs{background:url(/uploads/202504/02/icon_tggs01_12x3647.gif) 5px 10px no-repeat;} 
    .btn_fbxx{background:url(/uploads/202504/02/icon_fbxx01_12x3647.gif) 5px 10px no-repeat;} 
    .btn_xzmj{background:url(/uploads/202504/02/icon_xzmj01_12x3647.gif) 5px 10px no-repeat;} 
    .btn_alisoft{background:url(/uploads/202504/02/icon_alisoft01_12x3647.gif) 5px 10px no-repeat;} 
    /*cont*/ 
    #slideBox .cont_l{float:left;background:url(/uploads/202504/02/slideBox_conleft3647.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><a href="http://china.alibaba.com/member/join.htm?tracelog=Reg_TradeToolbar_Index">注册会员</a></li>
       <li><a href="http://trust.alibaba.com.cn/index_m.shtml">加入诚信通</a></li>
      </ul>
      <div id="sc_1">
      内容一
      </div>
      <div id="sc_2">
      内容一
      </div>
       <ul>
       <li><a href="http://trust.alibaba.com.cn/index_duibi4.shtml">推广公司</a></li>
       <li><a href="http://upload.china.alibaba.com/myalibaba/turbine/template/myalibaba,MyCompany">发布信息</a></li>
      </ul>
       <div id="sc_3">
      内容一
      </div>
      <div id="sc_4">
        内容一
    </div>
      <ul>
       <li><a href="http://info.china.alibaba.com/list/bsd/index.html?tracelog=bsd_cp8">寻找买家</a></li>
       <li><a href="http://alitalk.alibaba.com.cn/?tracelog=alitalk_homepage1">阿里软件</a></li>
      </ul>
      <div id="sc_5">
        内容一
      </div>
      <div 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
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/21 21:28:48