原生js实现选项卡

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
* */