原生js tabs切换（最简单）

tabs切换

1. html部分

<div class="tabs">
    <div class="tabs-title">
        <ul>
            <li class="title">tabs-1</li>
            <li class="title">tabs-2</li>
            <li class="title">tabs-3</li>
            <li class="title">tabs-4</li>
        </ul>
    </div>
    <div class="tabs-text">
        <div class="text show">tab-1</div>
        <div class="text">tab-2</div>
        <div class="text">tab-3</div>
        <div class="text">tab-4</div>
    </div>
</div>

2. css部分

  .tabs{
       width:500px;
       height:400px;
   }
   .tabs-title li{
       width:25%;
       margin:0;
       padding:0;
       list-style: none;
       float: left;
       text-align: center;
   }
   .text{
       width:100%;
       height:300px;
       display: none;
   }
   .show{
       display: block;
   }
   .title:hover{
       color: red;
   }

3. js部分

<script>
    window.onload = function() {
        var list = document.getElementsByClassName("title");
        var textlist = document.getElementsByClassName("text");

        for (var i = 0; i < list.length; i++) {
            list[i].index = i;
            list[i].onclick = function () {
                for(var j = 0;j<list.length;j++){
                   list[j].className = '';
                }
                this.className = 'title';
                for(var i = 0;i<textlist.length;i++)
                {
                    textlist[i].style.display = "none";
                }
                    textlist[this.index].style.display = "block";
        }
        }
    }
</script>

效果图：

最简单的tabs切换，样式等一系列的美化 css 未写