html代码：
<div class="tab">
<ul>
<li class="selected">图片</li>
<li>专栏</li>
<li>热点</li>
</ul>
<div class="selected">图片内容</div>
<div>专栏内容</div>
<div>热点内容</div>
</div>
css代码：
*{ margin: 0; padding: 0; }
.tab{
width: 360px;
margin: 30px auto;
}
.tab ul{
list-style: none;
}
.tab ul:after{
content: "";
clear: both;
display: block;
}
.tab ul li{
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background: #ccc;
margin-right: 10px;
}
.tab ul li.selected{
background: lightpink;
}
.tab div{
display: none;
width: 360px;
height: 200px;
text-align: center;
line-height: 200px;
background: lightpink;
}
.tab div.selected{
display: block;
}
js代码：
var tab = document.getElementsByClassName(‘tab‘)[0];
var lis = tab.getElementsByTagName(‘li‘);
var divs = tab.getElementsByTagName(‘div‘);
for(var i=0; i<lis.length; i++){ //3
lis[i].index = i;
lis[i].onclick = function (){
//console.log(this); //点击哪个元素，那么this就是哪个
for(var j=0; j<lis.length; j++) {
lis[j].className = ‘‘;
divs[j].className = ‘‘;
}
this.className = ‘selected‘;
divs[/*需要this的索引*/this.index].className = ‘selected‘;
}
}
注：
/*
* 自定义属性: 当一个值没有地方存储，或者存储不安全。不妨存储在自己身上
* this: 当事件被触发的那一刻，this就是触发事件的那个元素。把事件绑定给谁，谁就是this
* */