淘宝首页交互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.预览图：