js之选项卡效果

doctype html>
html lang="‘en">
head>
    meta charset="UTF-8">
    title>Tab切换-自动title>
    link type="text/css" rel="stylesheet" href="css/style.css">
    script type="text/javascript" src="js/script.js">script>
head>
body>
    div id="notice" class="notice">
        div id="notice-tit" class="notice-tit">
          ul>
              li class="select">
                  a href="#">公告a>
              li>
              li>
                  a href="#">规则a>
              li>
              li>
                  a href="#">论坛a>
              li>
              li>
                  a href="#">安全a>
              li>
              li>
                  a href="#">公益a>
              li>
          ul>
        div>
        div id="notice-con" class="notice-con">
            div class="mod" style="display:block">
                ul>
                    li>
                        a href="#">
                          张勇：要玩快乐足球
                        a>
                    li>
                    li>
                        a href="#">
                          阿里2000万驰援灾区！
                        a>
                    li>
                    li>
                        a href="#">
                          旅游宝让你边玩边赚钱
                        a>
                    li>
                    li>
                        a href="#">
                          多行跟进阿里信用贷款
                        a>
                    li>
                ul>
            div>
            div class="mod" style="display:none">
                ul>
                    li>
                        span>
                            [
                              a href="#">通知a>
                            ]
                        span>
                        a href="#">
                          "滥发"即将换新
                        a>
                    li>
                    li>
                        span>
                            [
                              a href="#">通知a>
                            ]
                        span>
                        a href="#">
                          比特币严管啦！
                        a>
                    li>
                    li>
                        span>
                            [
                              a href="#">通知a>
                            ]
                        span>
                        a href="#">
                          禁发商品名录！
                        a>
                    li>
                    li>
                        span>
                            [
                              a href="#">通知a>
                            ]
                        span>
                        a href="#">
                          商品属性限制
                        a>
                    li>
                ul>
            div>
            div class="mod" style="display:none">
                ul>
                    li>
                        span>
                            [
                              a href="#">聚焦a>
                            ]
                        span>
                        a href="#">
                          金牌卖家再启航
                        a>
                    li>
                    li>
                        span>
                            [
                              a href="#">功能a>
                            ]
                        span>
                        a href="#">
                          橱窗规则升级啦
                        a>
                    li>
                    li>
                        span>
                            [
                              a href="#">话题a>
                            ]
                        span>
                        a href="#">
                          又爱又恨优惠劵 
                        a>
                    li>
                    li>
                        span>
                            [
                              a href="#">工具a>
                            ]
                        span>
                        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="#">
                            爱心品牌联合征集
                        a>
                    li>
                    li>
                        a href="#">
                           名公益机构淘宝开店攻略
                        a>
                    li>
                ul>
            div>
        div>
    div>
body>
html>

function $(id){
    return typeof id===‘string‘?document.getElementById(id):id;
    //之后用到id选择器可以简写
}



window.onload=function(){
  

  // 获取所有的页签和要切换的内容
  var titles=$(‘notice-tit‘).getElementsByTagName(‘li‘);
  var divs=$(‘notice-con‘).getElementsByTagName(‘div‘);
  
  if(titles.length!=divs.length)
  return;
  
  // 遍历每一个页签且给他们绑定事件
  for(var i=0;i){
    titles[i].id=i;
    
    titles[i].onmouseover=function(){
        //清楚所有li上的class
        for(j=0;j){
            titles[j].className="";
            divs[j].style.display="none";
            }
            //设置当前Li为高亮显示
            this.className="select";
            divs[this.id].style.display="block";
    }
   
  };



}