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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 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中读取和写入WORD文档的代码
2008/04/09 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
Python语言描述随机梯度下降法
2018/01/04 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
vscode调试django项目的方法
2020/08/06 Python
python 进程池pool使用详解
2020/10/15 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
WiFi云数码相框:Nixplay
2018/07/05 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
生态学毕业生自荐信
2013/10/27 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
求职信内容怎么写
2014/05/26 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
Python时间操作之pytz模块使用详解
2022/06/14 Python
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android