显示效果：

代码实现：

<!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>tab切换</title>

  <style>

    .tab {

      width: 400px;

      margin: 200px auto;

    }

    .nav {

      width: 100%;

      height: 50px;

    }

    .nav a {

      width: 25%;

      height: 100%;

      float: left;

      line-height: 50px;

      background: gray;

      color: red;

      text-align: center;

      text-decoration: none;

    }

    .nav a.now {

      background: yellow;

      color: red;

    }

    .content {

      width: 100%;

      height: 350px;

      overflow: hidden;

    }

    .content section {

      width: 100%;

      height: 100%;

      display: none;

    }

    .content section.active {

      display: block;

    }

  </style>

</head>

<body>

  <div class="tab">

    <!-- 导航栏 -->

    <nav class="nav">

      <a href="javascript:;" data-content="one">新闻1</a>

      <a href="javascript:;" data-content="two">新闻2</a>

      <a href="javascript:;" data-content="three">新闻3</a>

      <a href="javascript:;" data-content="four">新闻4</a>

    </nav>

    <!-- 内容栏 -->

    <div class="content">

      <section id="one">

          新闻1

      </section>

      <section id="two">

          新闻2

      </section>

      <section id="three">

          新闻3

      </section>

      <section id="four">

          新闻4

      </section>

    </div>

  </div>

  <script>

    (function(index){

      /* 初始化默认选中第一个选项卡 */

      /* 得到a标签组成的伪数组 */

      var nav = document.querySelector('.nav');

      var aList = nav.querySelectorAll('a');

      /* 根据索引初始化默认显示的页签和内容 */

      var initA = aList[index];

      // console.log(initA);

      /* 给索引为0的a标签添加now类名 */

      initA.classList.add('now');

      /* 获取自定义类名的值，即为内容的ID */

      var initId = initA.dataset.content;

      // console.log(initId);

      /* 拼接id，选取对应的内容区域 */

      var initCon = document.querySelector('#' + initId);

      /* 增加active类名——初始化完成 */

      initCon.classList.add('active');

      /* 事件委托：点击事件选中相应的选项卡，然后获取这个元素，先删除原来有

      类名now的选项卡，和对应内容的active，然后给这个元素添加类

      名now，和对应id的内容选项增加类名active */

      nav.onclick = function(e) {

        /* 获取点击的a标签 */

        var currentA = e.target;

        /* 获取原来的a标签 */

        var oldA = document.querySelector('.now');

        var oldC = document.querySelector('.active');

        /* 移除原来初始化的类名 */

        oldA.classList.remove('now');

        oldC.classList.remove('active');

        /* 给当前点击的a标签添加now类名 */

        currentA.classList.add('now');

        /* 获取点击的a标签的自定义类名的值，即为内容的ID */

        var nowId = currentA.dataset.content;

        /* 拼接id，选取对应的内容区域 */

        var nowCon = document.querySelector('#' + nowId);

        /* 增加active类名——点击事件完成 */

        nowCon.classList.add('active')

      }

    })(0)

  </script>

</body>

</html>

使用classList和dataset实现tab切换的更多相关文章

  1. 微信小程序写tab切换

    微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...

  2. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  3. 小程序之 tab切换(选项卡)

    好久没有写东西了   今天写一个简单的东西 小程序tab切换 (选项卡功能) .wxml <view class="swiper-tab"> <view < ...

  4. 小程序的tab切换事件

    index.wxml代码 <view class="tab-left" > <view " bindtap="tab">tab ...

  5. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. 微信小程序--问题汇总及详解之tab切换

    设置背景颜色就直接在page里设置    page {background-color: rgb(242, 242, 242);} tab切换: navigator 页面链接 传参的格式为url=&q ...

  7. 微信小程序实现滑动tab切换和点击tab切换并显示相应的数据（附源代码）

    这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴,懒的小伙伴们可以直接拿来用,喜欢的点个支持 <view> <view class=" ...

  8. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

随机推荐

  1. 006.Oracle数据库 , DISTINCT去掉重复项重复内容

    /*Oracle数据库查询日期在两者之间*/ SELECT DISTINCT OCCUR_DATE FROM LM_FAULT WHERE ( ( OCCUR_DATE >= to_date( ...

  2. 017、MySQL取第4本季度开始和结束日期

    #取第4本季度开始和结束日期 SELECT QUARTER ( adddate( dy, ) ) QTR, date_add( dy, INTERVAL MONTH ) Q_start, adddat ...

  3. .Net内存回收

    研究了好半天的GC.Collect(),遗憾的发现,无法主动控制内存的回收. 只有窗体最小化的时候,内存才回收. 貌似gc.collect只是告诉虚拟机,准备回收内存吧.   GC.WaitForPe ...

  4. CentOS 6.x 重置root 密码

    1.重启,进入启动界面,快速按e,进入GNU GRUB界面. 2.选择第二项,按e,进行编辑. 3.在末尾输入1或single,回车,返回上一界面,还是选第二项,按b,进入单用户模式. 此时输入命令  ...

  5. springboot启动时候的一个注意事项——不同包下有同样名字的class类

    springboot 在启动时候,常启动不起来,检查发现是不同包下面有同名的service和serviceImpl,按理说不同包下是可以有同名的类存在的,但是启动就是启动不了,报错说 org.spri ...

  6. Express - 采用bcryptjs进行密码加密

    1.安装bcryptjs模块 npm install bcryptjs --save 2.在需要加密的模块中引入bcryptjs库    require('bcryptjs');   实战 : /** ...

  7. Percona-Toolkit 之 pt-kill 低效SQL

    [root@ tools]#vi ptkill_master.confuser=rootpassword=asd.123port=3306busy-time=5printkill /u01/soft/ ...

  8. JDBC面试知识点整理(温习用)

    要面试,所以把之前的笔记整理一遍,嘻嘻,加油 JDBC编程 使用JDBC,java程序可以轻松地操作各种主流数据库,Oracle,MySQL,等,使用JDBC编写的程序不仅可以实现跨数据库,还具有跨平 ...

  9. JQuery去实现校验用户名

    JQuery 是什么? javascript 的代码框架. 有什么用? 简化代码,提高效率. 核心 write less do more , 写得更少,做的更多. load //找到这个元素, 去执行 ...

  10. 5. 支撑高并发，高可用，海量数据备份恢复的Redis重要性

    商品详情页的架构实现 缓存架构 第一块儿,要掌握的很好的,就是redis架构 高并发,高可用,海量数据,备份,随时可以恢复,缓存架构如果要支撑这些要点,首先呢,redis就得支撑 redis架构,每秒 ...