原生JS实现tab选项卡

HTML：

<div class="box">
        <div class="title">
            <ul>
                <li>标题1</li>
                <li>标题2</li>
                <li>标题3</li>
            </ul>
        </div>
        <div class="content">
            <ul>
                <li>内容1</li>
                <li>内容2</li>
                <li>内容3</li>
            </ul>
        </div>
    </div>

CSS:

 *{margin: 0; padding: 0; list-style: none;}
        .box{width: 500px; height: 300px; border: 2px solid #999; margin: 100px}
        .title{width: 500px; height: 50px;}
        .title ul li{float: left; display: block; width: 150px; background: skyblue; line-height: 50px; text-align: center; margin-right: 25px; cursor: pointer; font-size: 20px; font-weight: bold;}
        .title ul li:nth-child(3){ margin-right: 0px;}
        .content{width: 500px; height: 250px; overflow: hidden;}
        .content  ul li{width: 500px; height: 250px; display: block; padding: 20px; font-size: 30px; font-weight: bold;}

JS：

<script>
        var tit = document.getElementsByClassName("title")[0];
        var lis = tit.getElementsByTagName("li");
        var con = document.getElementsByClassName("content")[0];
        var tabs = con.getElementsByTagName("li");
        for(var i = 0;i<lis.length;i++){
            lis[i].index = i;
            lis[i].onclick = function(){
                for(var j =0 ;j<lis.length; j++){
                    lis[j].style.background="skyblue";
                    tabs[j].style.display="none";
                }
                lis[this.index].style.background="rebeccapurple";
                tabs[this.index].style.display="block";
            }
        }
   </script>

最终效果图：