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>

 

javascript部分

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.length;i++){
    titles[i].id=i;
    
    titles[i].onmouseover=function(){
        //清楚所有li上的class
        for(j=0;j<titles.length;j++){
            titles[j].className="";
            divs[j].style.display="none";
            }
            //设置当前Li为高亮显示
            this.className="select";
            divs[this.id].style.display="block";
    }
   
  };



}

 

posted @ 2017-06-21 11:15  riyyao92  阅读(144)  评论(0编辑  收藏  举报