js tab栏切换代码实例解析


Posted in Javascript onSeptember 03, 2019

今天机试有个内容是做网易云课堂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栏切换代码实例解析

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

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

Javascript 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
解决layui 三级联动下拉框更新时回显的问题
Sep 03 #Javascript
Node.js学习教程之Module模块
Sep 03 #Javascript
vue动态绘制四分之三圆环图效果
Sep 03 #Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 #Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 #Javascript
JavaScript Array对象基本方法详解
Sep 03 #Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 #Javascript
You might like
解析php5配置使用pdo
2013/07/03 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中bisect的用法
2014/09/23 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
运动会入场词100字
2014/02/06 职场文书
情人节寄语大全
2014/04/11 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
学校周年庆活动方案
2014/08/22 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
重阳节慰问信
2015/02/15 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
一个都不能少观后感
2015/06/04 职场文书
春风化雨观后感
2015/06/11 职场文书
小学课改工作总结
2015/08/13 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang