淘寶首頁交互5--選項卡

1.html代碼：

<div class="tbh-notice">
                    <ul class="ul-1">
                        <li class="list active"><a href="#">公告</a>
                            <ul class="list_cont show">
                                <li><a href="#">9.9天貓全球酒水節啓動</a></li>
                                <li><a href="#">10萬款酒水等你來乾杯</a></li>
                                <li><a href="#">天貓超市"訂單價對摺"</a></li>
                                <li><a href="#">女排朱婷上閒魚學技能</a></li>
                            </ul>
                        </li>
                        <li class="list"><a href="#">規則</a>
                            <ul class="list_cont">
                                <li><a href="#">手機號卡商品禁售變動</a></li>
                                <li><a href="#">醫療服務類商品禁售</a></li>
                                <li><a href="#">全球購買手市場管理規</a></li>
                                <li><a href="#">分期返還類商品禁售</a></li>
                            </ul>
                        </li>
                        <li class="list"><a href="#">論壇</a>
                            <ul class="list_cont">
                                <li><a href="#">G20杭州快遞影響</a></li>
                                <li><a href="#">杭州"低慢小"禁飛</a></li>
                                <li><a href="#">十八紙顛覆傢俱</a></li>
                                <li><a href="#">是賺錢仍是騙子</a></li>
                            </ul>
                        </li>
                        <li class="list"><a href="#">安全</a>
                            <ul class="list_cont">
                                <li><a href="#">當心被騙子買家盯上</a></li>
                                <li><a href="#">爲何搜不到你寶貝</a></li>
                                <li><a href="#">代理生態淨化啓動</a></li>
                                <li><a href="#">新手賣家自殺式玩法</a></li>
                            </ul>
                        </li>
                        <li class="list"><a href="#">公益</a>
                            <ul class="list_cont">
                                <li><a href="#">阿里捐贈700萬元救災</a></li>
                                <li><a href="#">阿里與殘聯出助殘政策</a></li>
                                <li><a href="#">公益寶貝賣家發票索取</a></li>
                                <li><a href="#">公益機構淘寶開店攻略</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

2.js代碼：

/*選項卡*/

function tbh_notice(){
    var oAnnouncement = document.getElementsByClassName('tbh-notice')[0];
    var list = oAnnouncement.getElementsByClassName('list');
    var listCont = oAnnouncement.getElementsByClassName('list_cont');
    var timer = null;

    // 當鼠標懸停在第一級菜單,顯示下面的二級菜單
    for(var i=0; i<list.length; i++){
        list[i].index = i;
        list[i].onmouseover = function(){
            clearInterval(timer);
            var This = this;
            var index = this.index;
            timer = setTimeout(function(){
                //一級菜單顯示狀況
                for(var i=0; i<list.length; i++){
                    removeClass(list[i],'active');
                }
                addClass(This,'active');
                //二級菜單顯示狀況
                for(var i=0; i<listCont.length; i++){
                    removeClass(listCont[i],'show')
                }
                addClass(listCont[index],'show');
                },300)    
        }
    }
}
 //添加類名函數
addClass();
function addClass(obj, newClass) {
    var oldClass = obj.className;
    if (oldClass == '') {
        obj.className = newClass;
        return false;
    }
    var arr = oldClass.split(" ");
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == newClass) {
            return false;
        }
    }
    arr.push(newClass);
    obj.className = arr.join(" ");
}
//刪除類名函數
removeClass();
function removeClass(obj, old) {
    var oldClass = obj.className;
    var arr = oldClass.split(" ");
    for (var i = 0; i < arr.length; i++) {
        if( arr[i] == old ) {
            arr.splice(i,1)
            break;
        }
    }
    obj.className = arr.join(" ");
}

3.預覽圖：