JavaScript TAB栏切换效果的示例


Posted in Javascript onNovember 05, 2020

代码实现:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    li {
      list-style-type: none;
    }
    
    .tab {
      width: 978px;
      margin: 100px auto;
    }
    
    .tab_list {
      height: 39px;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }
    
    .tab_list li {
      float: left;
      height: 39px;
      line-height: 39px;
      padding: 0 20px;
      text-align: center;
      cursor: pointer;
    }
    
    .tab_list .current {
      background-color: #c81623;
      color: #fff;
    }
    
    .item_info {
      padding: 20px 0 0 20px;
    }
    
    .item {
      display: none;
    }
  </style>
</head>

<body>
  <div class="tab">
    <div class="tab_list">
      <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价(50000)</li>
        <li>手机社区</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">
        商品评价(50000)模块内容
      </div>
      <div class="item">
        手机社区模块内容
      </div>

    </div>
  </div>
  <script>
    // 获取元素
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var items = document.querySelectorAll('.item');
    // for循环绑定点击事件
    for (var i = 0; i < lis.length; i++) {
      // 开始给5个li 设置索引号 
      lis[i].setAttribute('index', i);
      lis[i].onclick = function() {
        // 1. 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式

        // 清除其他选项卡的样式
        for (var i = 0; i < lis.length; i++) {
          lis[i].className = '';
        }
        // 单独设置自己的样式 
        this.className = 'current';

        // 2. 下面的显示内容模块
        var index = this.getAttribute('index');
        // 让其余的item 这些div 隐藏
        for (var i = 0; i < items.length; i++) {
          items[i].style.display = 'none';
        }
        // 让对应的item 显示出来
        items[index].style.display = 'block';
      }
    }
  </script>
</body>

</html>

运行效果:

JavaScript TAB栏切换效果的示例

以上就是JavaScript TAB栏切换效果的示例的详细内容,更多关于JavaScript TAB栏切换效果的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery1.6 类型判断实现代码
Sep 01 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 #Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 #Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 #Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 #Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 #Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 #Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 #Javascript
You might like
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php制作文本式留言板
2015/03/18 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
vue键盘事件点击事件加native操作
2020/07/27 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
python七夕浪漫表白源码
2019/04/05 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
C语言笔试题
2014/09/04 面试题
中专生求职自荐信范文
2013/12/22 职场文书
工业学校毕业生自荐信范文
2014/01/03 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
村委会换届选举方案
2014/05/03 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
话题作文之呼唤
2019/12/18 职场文书