JS 导航条切换案例

HTML代码:

  <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>

js代码:

  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'

             }
         }

css代码:

  .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);
         }