<html><head lang="en"> <meta charset="UTF-8"> <title>Tab选项卡</title> <link href="css/index.css" rel="stylesheet"> <script src="js/index.js" type="text/javascript"></script> </head> <body> <div id="tab" class="tab"> <div id="tab-head" class="tab-head"> <ul> <li class="" id="0"><a href="#">公告</a></li> <li id="1" class=""><a href="#">规则</a></li> <li id="2" class=""><a href="#">论坛</a></li> <li id="3" class=""><a href="#">安全</a></li> <li id="4" class="select"><a href="#">公益</a></li> </ul> </div> <div id="nav-con" class="nav-con"> <div class="mod" style="display: none;"> <ul> <li> <a href="#">数据七夕:金牛爱送玫瑰</a> </li> <li> <a href="#">阿里打造"互联网监管"</a> </li> <li> <a href="#">10万家店60万新品</a> </li> <li> <a href="#">全球最大网上时装周</a> </li> </ul> </div> <div class="mod" style="display: none;"> <ul> <li> <a href="#">“全额返现”要管控啦</a> </li> <li> <a href="#">淘宝新规发布汇总(7月)</a> </li> <li> <a href="#">炒信规则调整意见反馈</a> </li> <li> <a href="#">质量相关规则近期变更</a> </li> </ul> </div> <div class="mod" style="display: none;"> <ul> <li> <a href="#">阿里建商家全链路服务</a> </li> <li> <a href="#">个性化的消费时代来临</a> </li> <li> <a href="#">跨境贸易是中小企业机</a> </li> <li> <a href="#">美妆行业虚假信息管控</a> </li> </ul> </div> <div class="mod" style="display: none;"> <ul> <li> <a href="#">接次文件，毁了一家店</a> </li> <li> <a href="#">账号安全神器阿里钱盾</a> </li> <li> <a href="#">新版阿里110上线了</a> </li> <li> <a href="#">卖家学违禁避免被处罚</a> </li> </ul> </div> <div class="mod" style="display: block;"> <ul> <li> <a href="#">为了公益high起来</a> </li> <li> <a href="#">魔豆妈妈在线申请</a> </li> </ul> </div> </div> </div> </body></html>
//function $(id){ // return typeof id === 'string' ? document.getElementById(id) : id; //} // //window.onload = function(){ // // 获取鼠标滑过的标签 // var titles = $('tab-head').getElementsByTagName('li'); // var divs = $('nav-con').getElementsByTagName('div'); // if (titles.length != divs.length) return; // // 遍历titles下所有的li // for(var i = 0; i < titles.length; i++){ // titles[i].id = i; // titles[i].onclick = function(){ // for(var j=0; j<titles.length; j++){ // titles[j].className = ''; // divs[j].style.display = 'none'; // } // this.className = 'select'; // divs[this.id].style.display = 'block'; //// alert(this.id); // } // } // //} function $(id){ return typeof id === 'string' ? document.getElementById(id) : id; } window.onload = function(){ // 获取所有的li(标题) 和 标题对应的内容(div) var titles = $('tab-head').getElementsByTagName('li'); var divs = $('nav-con').getElementsByTagName('div'); // 判断 if (titles.length != divs.length) return; for(var i = 0; i < titles.length; i++){ titles[i].id = i; titles[i].onmouseover = function(){ for(var j=0; j <titles.length; j++){ titles[j].className = ''; divs[j].style.display = 'none'; } this.className = 'select'; divs[this.id].style.display = 'block'; } } }