欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js tab栏切换代码实例解析

程序员文章站 2022-04-28 20:53:10
今天机试有个内容是做网易云课堂tab栏切换的,如下 先简单说下我当时的想法 1.先弄一个大div盒子,我命名为tab 2.在大盒子tab里面有两个小盒子,分别是标...

今天机试有个内容是做网易云课堂tab栏切换的,如下

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

最终我的效果如下

js tab栏切换代码实例解析

不是很相像,但还算过得去。。。。。。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。