//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';    }  }}