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 相关文章推荐
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
javascript测试题练习代码
Oct 10 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
详解vue-router基本使用
Apr 18 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
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 和 MySQL 基础教程(四)
2006/10/09 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php以post形式发送xml的方法
2014/11/04 PHP
php常见的魔术方法详解
2014/12/25 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
sort命令的作用和用法
2013/08/25 面试题
硕士生工作推荐信
2014/03/07 职场文书
就业协议书范本
2014/10/08 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
重阳节活动主持词
2015/07/04 职场文书
python元组打包和解包过程详解
2021/08/02 Python
一文搞懂Python Sklearn库使用
2021/08/23 Python
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技