效果图：

 

 

HTML部分

    <div class="tab"><div class="tab_top"><ul><li class="current">水果</li><li>家电</li><li>书籍</li><li>服装</li></ul></div><div class="tab_bottom"><div class="item" style="display: block;">水果区域</div><div class="item">家电区域</div><div class="item">书籍区域</div><div class="item">服装区域</div></div></div>

css部分

        *{margin: 0;padding: 0;}.tab{margin: 100px auto;width: 500px;height: 600px;/* border: 1px solid red; */}.tab_top{width: 100%;height: 30px;background-color: #ccc;border-bottom: 3px solid red;}li{list-style: none;float: left;width: 80px;height: 30px;line-height: 30px;margin: 0 auto;text-align: center;/* background-color: red; */}.tab_bottom{margin-top: 30px;}.current{color: #fff;background-color: red;}li:hover{color: darkred;}.item{display: none;}

js代码部分

    <script>var tabTop = document.querySelector('.tab_top')var lis = document.querySelectorAll('li')var items = document.querySelectorAll('.item')for (var i = 0; i < lis.length; i++){lis[i].setAttribute('index',i)lis[i].onclick = function () {for (var i = 0; i < lis.length; i++) {lis[i].className = ''}this.className = 'current'var index = this.getAttribute('index')for (var i = 0; i < items.length; i++){items[i].style.display = 'none'}items[index].style.display = 'block'}}</script>