js实现tab标签页

核心思想

点击tab标签后将此标签所对应的标签页的display设置为block，其它标签页权威none

<div id="send">
                            <span class="sen1">编辑推荐</span>
                            <span id="but1" class="show2">&lt;</span>
                            <span id="but2">&gt;</span>
                            <hr />
                            <div id="sen2" class="show">
                                <ul>
                                    <li>
                                        <img src="images/music/sen1.png" />
                                        <span>
                                            <em>【歌曲】</em>
                                            <a href="#">解离的真实</a>
                                            <em>tathtimi</em>
                                            <p>采样拼贴，好听的小情绪，雾霾散去的时候，可以听一个。</p>
                                        </span>
                                    </li>
                                    <li>
                                        <img src="images/music/sen2.png" />
                                        <span>
                                            <em>【歌曲】</em>
                                            <a href="#">止语</a>
                                            <em>tathtimi</em>
                                            <p>采样拼贴，好听的小情绪，雾霾散去的时候，可以听一个。</p>
                                        </span>
                                    </li>
                                    <li>
                                        <img src="images/music/sen3.png" />
                                        <span>
                                            <em>【歌曲】</em>
                                            <a href="#">现场录音</a>
                                            <em>tathtimi</em>
                                            <p>采样拼贴，好听的小情绪，雾霾散去的时候，可以听一个。</p>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                            <div id="sen3">
                                <ul>
                                    <li>
                                        <img src="images/music/sen4.png" />
                                        <span>
                                            <em>【歌曲】</em>
                                            <a href="#">解离的真实</a>
                                            <em>tathtimi</em>
                                            <p>采样拼贴，好听的小情绪，雾霾散去的时候，可以听一个。</p>
                                        </span>
                                    </li>
                                    <li>
                                        <img src="images/music/sen5.png" />
                                        <span>
                                            <em>【歌曲】</em>
                                            <a href="#">止语</a>
                                            <em>tathtimi</em>
                                            <p>采样拼贴，好听的小情绪，雾霾散去的时候，可以听一个。</p>
                                        </span>
                                    </li>
                                    <li>
                                        <img src="images/music/sen6.png" />
                                        <span>
                                            <em>【歌曲】</em>
                                            <a href="#">现场录音</a>
                                            <em>tathtimi</em>
                                            <p>采样拼贴，好听的小情绪，雾霾散去的时候，可以听一个。</p>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>

#send{
    height: 428px;
    /* border: 1px solid red; */
}
#send .sen1{
    font-size: 18px;
    color: black;
    margin-right: 75%;
    margin-left: 15px;
    vertical-align: middle;
}
#but1,#but2{
    border-radius: 20px;
    background-color: #23ab88;
    display: inline-block;
    height: 20px;
    width: 20px;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
}
#send  .show2{
    background-color: #80cfbb;
}
#send hr{
    border: 3px solid green;
}
#sen2,#sen3{
    display: none;
    margin-top: 10px;
    width: 590px;
    height: 390px;
    background-color: #f5f7f8;
    overflow: hidden;
}
#send div  ul{
    margin-top: 10px;
}
#send div li{
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    width: 180px;
    background-color: #fff;
}
#send div img,a{
    display: block;

}
#send div a{
    color:#23ab88;
    margin: 5px ;
}
#send div img{
    margin: 10px auto;
}
#send .show{
    display: block;
}

 var sen= document.getElementById("send");
     var sens=sen.getElementsByTagName("div");
     var but1 =document.getElementById("but1");
     var but2 =document.getElementById("but2");
     console.log(sen);
     console.log(sens);
     console.log(but1);
     console.log(but2);
     var i=0;
     but1.onclick=function(){
         console.log(i++);
         this.className="show2";
         but2.className="";
         sens[0].className="show";
         sens[1].className="";
     }
     but2.onclick=function(){
        console.log(i++);
        this.className="show2";
        but1.className="";
        sens[1].className="show";
        sens[0].className="";
    }