选项卡的动态实现

实现的效果图：

实现的代码：
css:

<style>
        *{
            margin:0;
            padding:0;
        }
        #tabBox{
            width: 500px;
            margin: 20px auto;
        }
        #tabBox .tab{
            position: relative;
            top: 2px;
        }
        #tabBox .tab li{
            list-style: none;
            padding: 0 10px;
            height: 35px;
            line-height: 35px;
            border: 2px solid #AAA;
            float: left;
            margin-right: 10px;
           background: #EEE;
           cursor: pointer;
        }
        #tabBox .tab li.active{
           
            background: #fff;
            border-bottom-color: #fff;
        }
        #tabBox div{
            padding:10px;
            height: 100px;
            border: 2px solid #AAA;
            display: none;
            background-color: #fff;
        }
        #tabBox .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
        #tabBox div.active{
            display: block;
        }
 </style>

html:

<section id="tabBox">
        <ul class="tab clearfix">
            <li class="active">编程</li>
            <li>读书</li>
            <li>运动</li>
        </ul>
        <div class="active">编程可以使我“赚取高薪”</div>
        <div>读书可以使我“修身养性”</div>
        <div>运动可以使我“身体健康”</div>
</section>

js-使用自定义属性：

<script>
        var tabBox=document.getElementById('tabBox'),
        tabList=document.getElementsByTagName('li'),
        content=document.getElementsByTagName('div');
        function changeTab(index){
            // 1.清空所有LI和DIV样式
            for(var i=0;i<tabList.length;i++){
                tabList[i].className='';
                content[i].className='';
            }
            // 2.让点击的这个LI和DIV有选中样式
            tabList[index].className='active';
            content[index].className='active';
        }
        // 自定义属性绑定点击事件
        for(var i=0;i<tabList.length;i++){
            tabList[i].n=i;
            tabList[i].onclick=function (){
                changeTab(this.n);
            }
        }
</script>

绑定点击事件还可以使用闭包如下：

	for(var i=0;i<tabList.length;i++){
		tabList[i].onclick=(function (i){
			return function (){
				changeTab(i);
			};
	})(i);
}

还可使用let的方法实现：

 for(let i=0;i<tabList.length;i++){
            tabList[i].onclick=function (){
                changeTab(i);
            }
        }