自动切换的tab标签代码

2019独角兽企业重金招聘Python工程师标准>>>

//html


    
        
        
        
    
    
      
      
        

          

            
娱乐新闻
            
体育新闻
            
国际新闻
            
国内新闻
          
        
        

          
娱乐新闻
          
体育新闻
          
国际新闻
          
国内新闻
        
      

           

//css
/*
* @Author: lixiaoyan
* @Date:   2016-05-06 13:45:33
* @Last Modified by:   Administrator
* @Last Modified time: 2016-05-06 16:31:02
*/
*{
  padding: 0;
  margin: 0;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
.tab1{
  width: 400px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 100px auto;
  overflow: hidden;
}
.menu{
  width: 100%;
  height: 29px;
  border-right: 1px solid #ccc;
}
.menu li{
  float: left;
  text-align: center;
  font: 400 14px/29px '微软雅黑';
  background-color: #e0e2eb;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 99px;
  cursor: pointer;
  /*overflow: hidden;*/
}
.menu li.curr{
  font-weight: 700;
  color: red;
  border-bottom: none;
  background-color: #fff;
}
.menudiv{
  /*如果不写width： 100%，那么他继承父盒子的width，如果写上width：100%，那么他的content等于父盒子的宽度，border或者padding另外算，除非你写上box-sizing：border-box*/
  /*width: 100%;*/
  height: 200px;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.menudiv div{
  width: 100%;
  height: 200px;
  padding: 5px;
  display: none;
}
.menudiv .show{
  display: block;
}

//js
/*
 * @Author: Administrator
 * @Date:   2016-05-06 13:46:03
 * @Last Modified by:   Administrator
 * @Last Modified time: 2016-05-06 16:31:56
 */

'use strict';
window.onload = function() {
  //获取tab1元素
  var tab1 = document.getElementById("tab1");
  console.log(tab1);
  //获取tab1元素的第一个子节点menu元素，在获取她下边的ul元素，在获取它下边的所有的li元素的集合
  var lis = tab1.children[0].children[0].children;
  console.log(lis);
  //获取tab1下边的第二个子元素menudiv，在获取它下边的所有的div元素的集合
  var menudivs = tab1.children[1].children;
  console.log(menudivs);

  for (var i = 0, len = lis.length; i < len; i++) {
    lis[i].index = i;
    lis[i].onmouseover = function() {
      for (var j = 0, len = menudivs.length; j < len; j++) {
        lis[j].className = '';
        menudivs[j].className = '';
      }
      this.className = 'curr';
      console.log(this.index);
      console.log(menudivs[this.index]);
      menudivs[this.index].className = 'show';
    }
  }
}

转载于:https://my.oschina.net/lixiaoyan/blog/670971