显示效果：

代码实现：

<!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. js加密（十二）yy.com rsa

    1. url: https://aq.yy.com/ 2. target: 登录js 3. 是一个简单的rsa加密,找到加密的js文件,全部复制出来,修改一下就好. 4. 和网页中的一样

  2. 065、Java面向对象之定义一个Book类，在主类中使用Book类

    01.代码如下: package TIANPAN; class Book { // 定义一个新的类 String title; // 书的名字 double price; // 书的价格 public ...

  3. 1.Maven分模块，分工程管理，多Web应用合并war包

    Eclipse 创建Maven工程 修改POM文件   Eclipse 创建Module工程 以此类推,创建Maven 的Modules web工程goodsmgrweb,创建Maven的Module ...

  4. numpy.linspace使用详解

    numpy.linspace(start, stop, num=50, endpoint=True, retstep=False, dtype=None) 在指定的间隔内返回均匀间隔的数字. 返回nu ...

  5. face_recognition人脸识别

    对亚洲人识别准确度有点差,具体安装移步:https://www.cnblogs.com/ckAng/p/10981025.html 更多操作移步:https://github.com/ageitgey ...

  6. 从0开始自己配置一个vps虚拟服务器(3)

    安装数据库mysql,因为这个服务器比较烂,我只能装低版本的数据库.尝试了很多遍,终于装上去了,高版本应该没那么麻烦. 我安装了很多遍,下载的安装包,都没有安装成功. mysql各版本安装地址: (我 ...

  7. c++链接mysql5.7

    1.单独安装mysql5.7 phpstudy安装的没有include和lib文件夹2.vs2013中右键属性 项目 - C/C++ - 常规 - 附加包含目录 里面添加 D:\**\include ...

  8. 023-PHP常用数组函数

    <?php $colors = array("red", "green", "blue","yellow"); p ...

  9. android 开发学习

    androidSDK自带SQLite数据库,使用时继承父类(SQLiteOpenHelper). this表对象本身,理解为指向自身的指针:super(超类)表对象的父类,即指向父类的指针. Cont ...

  10. C++ 管道

    // PipeServer.cpp : Defines the entry point for the console application. // #include "stdafx.h& ...