利用 JavaScript 实现简单的 tab 选项卡

利用 javaScript 实现简单的 tab 选项卡****

HTML：

//tab
<div id="caseBoxTab">
    <a href="javaScript:void(0)" class="caseBoxTabActive">tab1</a>
    <a href="javaScript:void(0)">tab2</a>
</div>

//cont
<div id="caseBoxCont">
    <div>view1</div>
    <div>view2</div>
</div>
​

JS：

//获取tab 标签 box
var caseBoxTab = document.getElementById('caseBoxTab');

//获取tab 标签 box 下子元素个数
var caseBoxTabList = caseBoxTab.getElementsByTagName('a');

//获取cont切换展示 box
var caseBoxCont = document.getElementById('caseBoxCont');

//获取cont下子元素个数
var caseBoxContList = caseBoxCont.getElementsByTagName('div');

//遍历tab
for(var i = 0; i < caseBoxTabList.length; i += 1) {
    //为每一个tab元素添加下标
    caseBoxTabList[i].index = i;
    
    //为每一个tab元素绑定click dom
    caseBoxTabList[i].onclick = function() {
        //初始化,清空所有tab选中class,设置所有cont元素隐藏
        for(var i = 0; i < caseBoxTabList.length; i += 1) {
            caseBoxTabList[i].className = '';
            caseBoxContList[i].style.display = 'none'
        }

        //为当前点击tab标记选中
        this.className = 'caseBoxTabActive';

        //根据当前tab下标,设置对应cont显示状态
       caseBoxContList[this.index].style.display = 'block'

    }
}
​

CSS:

#caseBoxTab>a{color:#000000;display: table-cell;}
#caseBoxTab>a:first-child{display: block;}
#caseBoxTab .caseBoxTabActive{color:red;}
#caseBoxCont>div{display: none;}
​