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 浏览器判断实现函数
Aug 20 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue修饰符.capture和.self的区别
Apr 22 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
Javascript之文件操作
2007/03/07 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
原生js实现购物车功能
2020/09/23 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
python类参数self使用示例
2014/02/17 Python
python3编写C/S网络程序实例教程
2014/08/25 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
用Python shell简化开发
2018/08/08 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
道德模范先进事迹
2014/02/14 职场文书
重阳节简报
2015/07/20 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏