js tab欄切換代碼實例解析

2019-11-19 10:54:55

字體：大中小

來源：轉載

供稿：網友

今天機試有個內容是做網易云課堂tab欄切換的，如下

先簡單說下我當時的想法

1.先弄一個大div盒子，我命名為tab

2.在大盒子tab里面有兩個小盒子，分別是標題欄（tab_list）和內容欄（tab_con）

3.采用display：flex；使標題欄菜單和內容欄的內容水平對齊（可能待會放的代碼不是很規范，但實現對齊效果）

4.js編寫鼠標移入事件，主要是利用display：none和display：block之間的切換。

下面放下我當時寫的代碼吧，可能寫得不是很正規，不符合習慣，請大家見諒

由于代碼太多分幾部分說

HTML部分――大致布局，標題欄和內容欄

<div class="tab">    <div class="tab_list">      <ul>        <li class="active" >今日 20:00開搶</li>        <li>明天 10:00開搶</li>        <li>明天 14：00開搶</li>        <li>明天 20:00開搶</li>        <li>后天 10:00</li>        <li>后天 14:00</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 class="item">                </div>　　　　　　    </div>  </div>

部分內容區item區域的HTML代碼，基本差不多

<div class="item" style="display: block">        <div class="box">          <div class="product">            <a><img src="img/pic1.png"/></a>            <div class="price" >              <h3>javascript課程</h3>              <h5>妙學堂</h5>              <p>                <span style="color: red;font-size: 16px;">￥49.9</span>                <span style="text-decoration:line-through ;font-size: 10px;">￥1600</span>                <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即將開搶</span>              </p>            </div>          </div>          <div class="product">            <a><img src="img/pic1.png"/></a>            <div class="price" >            <h3>javascript課程</h3>              <h5>妙學堂</h5>              <p>                <span style="color: red;font-size: 16px;">￥49.9</span>                <span style="text-decoration:line-through ;font-size: 10px;">￥1600</span>                <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即將開搶</span>              </p>            </div>          </div>          <div class="product">            <a><img src="img/pic1.png"/></a>            <div class="price" >            <h3>javascript課程</h3>              <h5>妙學堂</h5>              <p>                <span style="color: red;font-size: 16px;">￥49.9</span>                <span style="text-decoration:line-through ;font-size: 10px;">￥1600</span>                <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即將開搶</span>              </p>            </div>          </div>          <div class="product">            <a><img src="img/pic1.png"/></a>            <div class="price" >            <h3>javascript課程</h3>              <h5>妙學堂</h5>              <p>                <span style="color: red;font-size: 16px;">￥49.9</span>                <span style="text-decoration:line-through ;font-size: 10px;">￥1600</span>                <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即將開搶</span>              </p>            </div>          </div>          <div class="product">            <a><img src="img/pic1.png"/></a>            <div class="price" >            <h3>javascript課程</h3>              <h5>妙學堂</h5>              <p>                <span style="color: red;font-size: 16px;">￥49.9</span>                <span style="text-decoration:line-through ;font-size: 10px;">￥1600</span>                <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即將開搶</span>              </p>            </div>          </div>               </div>      </div>

CSS部分

.tab{     width: 100%;     height: 300px;     text-align: center;          margin: 10px auto;     background-color: ghostwhite;   }   .tab_list ul{     display: flex;     height: 50px;     margin: 0 auto;     padding: 0;        }   .tab li{          list-style: none;     height: 50px;     line-height: 50px;     flex:auto;        }   .tab_list .active{     background-color: red;     color: #ffffff;   }   .tab_con{     margin: 10px auto;     width: 100%;     height: 200px;        }   .item{     display: none;   }   .box{     display: flex;   }   .product{          flex: auto;   }   .product img{     width: 220px;     height: 120px;          }    .price{      position: relative;          width: 220px;     height: 80px;   }    .price p{     margin: 0px;     left: 0px;     position: absolute;   }

JS部分

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

最終我的效果如下