<div class="tab">

         <div class="tab_list">

             <ul>

                 <li class="current">商品介绍</li>

                 <li>规格与包装</li>

                 <li>售后保障</li>

                 <li>商品评价</li>

                 <li>手机社区</li>

             </ul>

         </div>

         <div class="tab_con">

             <div class="item" style="display: block;">

                 商品介绍

             </div>

             <div class="item">

                 规格与包装

             </div>

             <div class="item">

                 售后保障

             </div>

             <div class="item">

                 商品评价

             </div>

             <div class="item">

                 手机社区

             </div>

         </div>

     </div>

  var tab_list = document.querySelector(".tab_list")

         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 j = 0; j < lis.length; j++) {

                     lis[j].className = '';

                 }

                 // 留下对应的li

                 this.className = 'current'

                 // 下面的显示内容模块

                 var index = this.getAttribute("index")

                 // 清除所有item  让所有item隐藏

                 for (var i = 0; i < items.length; i++) {

                     items[i].style.display = 'none'

                 }

                 // 留下对应的item让他显示出来

                 items[index].style.display = 'block'

             }

         }

  .tab {

             width: 1000px;

             height: auto;

             margin: 0 auto;

         }

         .tab_list {

             height: 60px;

             background-color: #efefef;

         }

         .tab_list ul {

             list-style: none;

             padding:;

         }

         .tab_list ul li {

             float: left;

             width: 20%;

             line-height: 60px;

             text-align: center;

             cursor: pointer;

         }

         .current {

             background-color: #c81623;

             color: #fff;

         }

         .item {

             display: none;

             width: 100%;

             height: 200px;

             font-size: 20px;

             background-color: rgb(192, 228, 192);

         }