淘寶切換效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div,ul,li,a{margin: 0;padding: 0;}
        li{list-style: none;}
        a{text-decoration: none;color: #000;font-size: 12px;}
        a:hover{color: #F00;}
        /**/
        .change{width:298px;height: 98px;border: 1px solid #eee;margin:0 auto;}
        .box_title{width:100%;height: 27px;overflow: hidden;background: #f7f7f7; }
        .box_title ul{width: 110%;height: 27px;}
        .box_title li{height:26px;line-height:26px;text-align:center;width: 59px;float:left;border-left:1px solid #f7f7f7;border-right:1px solid #f7f7f7;border-bottom:1px solid #eee;margin-left: -1px;}
        .box_content{width:298px;margin: 12px 0 0 15px;overflow: hidden; }
        .box_content li{float: left;width: 130px;height: 24px;padding-left: 4px;}
        .box_title .current{position: relative;border-left:1px solid #eee;border-right:1px solid #EEE;background: #fff;border-bottom: 1px solid #FFF;}


    </style>
</head>
<body>
<div id="box">
    <div>
        <ul>
            <li><a href="##">公告</a></li>
            <li><a href="##">規則</a></li>
            <li><a href="##">論壇</a></li>
            <li><a href="##">安全</a></li>
            <li><a href="##">公益</a></li>
        </ul>
    </div>
    <ul>
        <li><a href="##">1賣家有望歸入國家社保</a></li>
        <li><a href="##">賣家有望歸入國家社保</a></li>
        <li><a href="##">1賣家有望歸入國家社保</a></li>
        <li><a href="##">賣家有望歸入國家社保</a></li>
    </ul>
    <ul style="display: none;">
            <li><a href="##">2賣家有望歸入國家社保</a></li>
            <li><a href="##">賣家有望歸入國家社保</a></li>
            <li><a href="##">2賣家有望歸入國家社保</a></li>
            <li><a href="##">賣家有望歸入國家社保</a></li>
        </ul>
    <ul style="display: none;">
            <li><a href="##">3賣家有望歸入國家社保</a></li>
            <li><a href="##">賣家有望歸入國家社保</a></li>
            <li><a href="##">3賣家有望歸入國家社保</a></li>
            <li><a href="##">賣家有望歸入國家社保</a></li>
        </ul>
    <ul style="display: none;">
            <li><a href="##">4賣家有望歸入國家社保</a></li>
            <li><a href="##">賣家有望歸入國家社保</a></li>
            <li><a href="##">4賣家有望歸入國家社保</a></li>
            <li><a href="##">賣家有望歸入國家社保</a></li>
        </ul>
    <ul style="display: none;">
            <li><a href="##">5賣家有望歸入國家社保</a></li>
            <li><a href="##">賣家有望歸入國家社保</a></li>
            <li><a href="##">5賣家有望歸入國家社保</a></li>
            <li><a href="##">賣家有望歸入國家社保</a></li>
        </ul>
</div>

</body>
<script>
    var boxObj=document.getElementById("box");
    var ulObj=boxObj.getElementsByTagName("ul");
    var liObj=ulObj[0].getElementsByTagName("li");
    for(var i=0;i<liObj.length;i++){
           liObj[i].index=i;//記錄當前的位置.index爲自定義屬性       
            liObj[i].onmouseover=function(){
              if(this.className=="current")
                              return;//若是當前對象已經選中,直接跳出
              var oldNode;//用來存儲原來current的位置
              var newNode=this.index;
              for(var j=0;j<liObj.length;j++)
              {
                  if(liObj[j].className=="current")
                  {
                        oldNode=j;
                  }
              }
                  ulObj[oldNode+1].style.display="none";
                  liObj[oldNode].className="";


                  liObj[newNode].className="current";
                  ulObj[newNode+1].style.display="";
        }
    }
</script>
</html>
相關文章
相關標籤/搜索