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 相关文章推荐
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
解决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
php实现简单洗牌算法
2013/06/18 PHP
PHP加密解密类实例分析
2015/04/20 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
大学生职业生涯规划书模板
2014/01/03 职场文书
2014年平安夜寄语
2014/12/08 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript