jstab欄切換代碼實例解析

今天機試有個內(nèi)容是做網(wǎng)易云課堂tab欄切換的，如下

創(chuàng)新互聯(lián)專注于九臺網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供九臺營銷型網(wǎng)站建設(shè)，九臺網(wǎng)站制作、九臺網(wǎng)頁設(shè)計、九臺網(wǎng)站官網(wǎng)定制、小程序設(shè)計服務(wù)，打造九臺網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供九臺網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

js tab欄切換代碼實例解析

先簡單說下我當(dāng)時的想法

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

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

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

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

下面放下我當(dāng)時寫的代碼吧，可能寫得不是很正規(guī)，不符合習(xí)慣，請大家見諒

由于代碼太多分幾部分說

HTML部分——大致布局，標題欄和內(nèi)容欄

<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" >
      </div>
      <div class="item">        
      </div>
      <div class="item">        
       </div>
      <div class="item">        
        </div>
      <div class="item">        
       </div>
      <div class="item">        
        </div>　　　　　　
    </div>
  </div>

部分內(nèi)容區(qū)item區(qū)域的HTML代碼，基本差不多

<div class="item" >
        <div class="box">
          <div class="product">
            <a><img src="img/pic1.png"/></a>
            <div class="price" >
              <h4>javascript課程</h4>
              <h6>妙學(xué)堂</h6>
              <p>
                <span >￥49.9</span>
                <span >￥1600</span>
                <span >即將開搶</span>
              </p>
            </div>
          </div>
          <div class="product">
            <a><img src="img/pic1.png"/></a>
            <div class="price" >
            <h4>javascript課程</h4>
              <h6>妙學(xué)堂</h6>
              <p>
                <span >￥49.9</span>
                <span >￥1600</span>
                <span >即將開搶</span>
              </p>
            </div>
          </div>
          <div class="product">
            <a><img src="img/pic1.png"/></a>
            <div class="price" >
            <h4>javascript課程</h4>
              <h6>妙學(xué)堂</h6>
              <p>
                <span >￥49.9</span>
                <span >￥1600</span>
                <span >即將開搶</span>
              </p>
            </div>
          </div>
          <div class="product">
            <a><img src="img/pic1.png"/></a>
            <div class="price" >
            <h4>javascript課程</h4>
              <h6>妙學(xué)堂</h6>
              <p>
                <span >￥49.9</span>
                <span >￥1600</span>
                <span >即將開搶</span>
              </p>
            </div>
          </div>
          <div class="product">
            <a><img src="img/pic1.png"/></a>
            <div class="price" >
            <h4>javascript課程</h4>
              <h6>妙學(xué)堂</h6>
              <p>
                <span >￥49.9</span>
                <span >￥1600</span>
                <span >即將開搶</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>

最終我的效果如下

js tab欄切換代碼實例解析

不是很相像，但還算過得去。。。。。。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站欄目：jstab欄切換代碼實例解析
分享鏈接：http://jinyejixie.com/article20/ipjgjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、移動網(wǎng)站建設(shè)、定制網(wǎng)站、商城網(wǎng)站、網(wǎng)站排名、網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

jstab欄切換代碼實例解析