显示效果：

代码实现：

<!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. Webstorm常用快捷键备忘

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaSscript IDE ...

  2. python用于web题里写解密脚本

    题源自bugku里的WEB3 选择选项让他停止,F12后出现如下代码,一看数字就知道是ASC: 复制出来,写pyhton脚本如下,在编译器里跑一下 s='KEY{J2sa42ahJK-HS11III} ...

  3. 吴裕雄--天生自然java开发常用类库学习笔记：对象克隆技术

    class Person implements Cloneable{ // 实现Cloneable接口表示可以被克隆 private String name ; public Person(Strin ...

  4. DevOps 教程

    DevOps是一种研发文化,它促进开发团队和运维团队之间更好地协作,以自动化和可重复的方式,更快地将代码部署到生产环境中.DevOps是development和operations两个单词的组合. D ...

  5. P1053 住房空置率

    P1053 住房空置率 转跳点:

  6. xargs详细

    转自  http://czmmiao.iteye.com/blog/1949225 简介之所以能用到这个命令,关键是由于很多命令不支持|管道来传递参数,而日常工作中有有这个必要,所以就有了xargs命 ...

  7. cf 506 A. Mr. Kitayuta, the Treasure Hunter

    不知道这个sb题怎么做错了.. /*#include <bits/stdc++.h> #define LL long long using namespace std; inline in ...

  8. spring 动态bean注册

    1. import org.springframework.beans.MutablePropertyValues; import org.springframework.beans.factory. ...

  9. 第二周的java

  10. windows driver 驱动程序我的下载地址

    http://download.csdn.net/detail/sz76211822/8197619 版权声明:本文为博主原创文章,未经博主允许不得转载.