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