显示效果：

代码实现：

<!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. Project导入RedMine甘特图展示

    前端时间因公司业务需要使用RedMine来管理项目进度. 但是使用其自带的csv导入工具无法完成导入. 而我是java开发,并不会所谓的ruby语言,自然无法在段时间内完成此导入功能的修改. so,经 ...

  2. 0108 spring的申明式事务

    背景 互联网的金融和电商行业,最关注数据库事务. 业务核心 说明 金融行业-金融产品金额 不允许发生错误 电商行业-商品交易金额,商品库存 不允许发生错误 面临的难点: 高并发下保证: 数据一致性,高 ...

  3. BInder机制总结

    BInder机制 Linux内核的基础知识 进程隔离/虚拟地址空间 操作系统当中为了保证进程间互不干扰,设计了进程隔离的技术,避免了一个进程去操作另一个进程的数据.进程隔离用到了虚拟地址空间,不同进程 ...

  4. supervisor的介绍

    1.supervisor 简介 Supervisor 是用Python开发的一个client/server服务,是Linux/Unix系统下的一个进程管理工具,不支持Windows系统.它可以很方便的 ...

  5. 十八、React react-router4.x中：实现路由模块化、以及嵌套路由父子组件传值

    一.路由模块化(用字典定义路由,然后循环出来) 1.官方文档参考 [官方文档]https://reacttraining.com/react-router/web/guides/quick-start ...

  6. linux添加一个已经存在用户到一个用户组

    在使用virtual-box的共享文件时,在虚拟机中共享文件的用户为root,用户组为vboxsf, 所以需要将自己添加到vboxsf这组当中去,一开始使用useradd老是失败,后来才查到要用use ...

  7. JS - if(flag) if(!flag)

    1,    if(flag)   判断是否为 true 2,    if(!flag)  判断是否为false

  8. BZOJ 4853 [Jsoi2016]飞机调度

    题解: 我严重怀疑语文水平(自己的和出题人的) 把航线按照拓扑关系建立DAG 然后最小路径覆盖 为什么两条首尾相接航线之间不用维护???? #include<iostream> #incl ...

  9. C#验证码 使用GDI绘制验证码

    首先展示一下效果图如下: C#中的GDI特别方便,很多方法我们只要简单的调用就可以实现很复杂的功能.具体实现过程如下: 首先创建一个windows窗体应用(测试使用,实际开发winform程序时在需要 ...

  10. chrome浏览器安装vue调试器vue-devtools

    chrome浏览器安装vue调试器vue-devtools https://blog.csdn.net/zhangjnwei/article/details/76693053