首页
 
       
新闻
 
       
图片
 
      
 
      
首页内容
 
      
新闻内容
 
      
图片内容
 /div>
     

*{    padding: 0; margin: 0; } ul{ list-style: none;} #tab{ width: 480px; margin: 20px auto; border: 1px solid red; } ul li{ float: left; width: 160px; height: 60px; line-height: 60px; text-align: center; background-color: #cccccc; } ul li a{ text-decoration: none; color:black; } li.active{ background-color: #FFFFFF; } p{ display: none; height: 200px; text-align: center; line-height: 200px; background-color: #FFFFFF; } p.active{ display: block; }

var tabli = document.getElementsByTagName('li'); var tabContent = document.getElementsByTagName('p') for(var i = 0; i < tabli.length; i++){ //为了保存我的i的变量 tabli[i].index = i; tabli[i].onclick = function(){ for(var j = 0; j < tabli.length; j++){ tabli[j].className = ''; tabContent[j].className = ''; } this.className = 'active' console.log(this.index) tabContent[this.index].className = 'active'; } }