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.預覽圖：

?

　　　　　　?

?

轉載于:https://www.cnblogs.com/ICE-Dong/p/7485783.html

總結

以上是生活随笔為你收集整理的淘宝首页交互5--选项卡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。