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