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

原生js實現選項卡