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 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 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+MySQL 制作简单的留言本
2009/11/02 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
Django中的用户身份验证示例详解
2019/08/07 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
Django中template for如何使用方法
2021/01/31 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
外贸业务员求职信范文
2013/12/12 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
结婚堵门保证书
2015/05/08 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
新手必备Python开发环境搭建教程
2021/05/28 Python
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL