Dom--选项卡的实现

 
    
"container">
        
        <ul id="btn-box">
            <li class="btn active">事实li>
            <li class="btn">新闻li>
            <li class="btn">体育li>
        ul>
 
        <div id="content">
            <div class="list active">事实内容div>
            <div class="list">新闻内容div>
            <div class="list">体育内容div>
        div>
 
    

页面展示如下，还没有样式

2.写出页面的初始样式以及点击进去的样式 ，其中含有active的类选择器的样式是点击以后的样式

现在的初始界面如下 

到这里都比较简单，不多进行讲解

二、js代码--功能的实现

 1.首先需要获取到两个类的元素，通过document下的方法进行获取然后分别赋值给btns和list

 
        var btns = document.getElementsByClassName('btn');
        var list = document.getElementsByClassName('list');
 
 

2. 由于通过类名字取到的元素是一个数组，所以我们绑定点击事件需要用循环来实现，我们想让点击的按钮为active样式，那么我们先默认阿让所有按钮的都为正常样式（不为active的普通样式），同样我们想让对应的文本框输出对应的内容，那我们默认让其都先隐藏掉（list类）；

             for(var i=0; ilength; i++){          
              btns[i].onclick = function(){
 
                for(var j=0; j< btns.length; j++){
                    btns[j].className = "btn";
                    list[j].className = "list"
                }
            }
        }
 

3.到这里我们所有的按钮都为默认样式，文本框内容都隐藏掉了；然后我们给对应的按钮赋给他active类，给对应的文本标签active类 

解决第一步很好解决，可以通过this.className直接更改点击的按钮的样式；

但是第二步我们是否也可以用this来进行操作呢？我们通过list.[this].className="list active"进行试验，并不能实现功能，点击其他按钮，文本框中不会显示文字，我们需要找到他的索引

我们可以通过i来代替索引值来绑定吗？同样不行，因为如果用i进行绑定，i最后的值会是btns.length-1，不是其索引值，

我们需要在btns中新定义一个属性取名index如下边定义，当点击的时候，在当前循环把其赋值给index属性，我们可以通过this来取到当前点击的按钮的索引值然后来赋值给list

             for(var i=0; ilength; i++){ 
            btns[i].index = i; 
            btns[i].onclick = function(){
                for(var j=0; j< btns.length; j++){
                    btns[j].className = "btn";
                    list[j].className = "list"
                }
                this.className = "btn active"；
                // console.log(this.index);
                list[this.index].className = "list active";
 
 
            }
        }
 

然后代码功能就实现了，明天四六级，晚安大家》__________——《