js 选项卡

时间：2023-03-09 00:57:03
js 选项卡 
<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=""><a href="#">公告</a></li>

               <li id="" class=""><a href="#">规则</a></li>

               <li id="" class=""><a href="#">论坛</a></li>

               <li id="" class=""><a href="#">安全</a></li>

               <li id="" 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 = ; i < titles.length; i++){

       titles[i].id = i;

       titles[i].onmouseover = function(){

         for(var j=; j <titles.length; j++){

             titles[j].className = '';

             divs[j].style.display = 'none';

         }

          this.className = 'select';

          divs[this.id].style.display = 'block';

       }

    }

}

相关文章