显示效果：

代码实现：

<!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. tp3.2 自带的文件上传及生成缩略图功能

    public function upload_file($file_name,$width,$height) { //检查图片尺寸是否合法 $image_size = getimagesize($_F ...

  2. 012-PHP创建一个多维数组

    <?php $Cities = array( //二维数组array() "华北地区"=>array( "北京市", "天津市" ...

  3. DataTable.Copy()

    DataTable dtpocopy = dtPO.Copy(); DataRow[] dr = dtpocopy .Select("客户名称='" + cusName + &qu ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-search

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. Setup Factory删除TODO文件

    s1= Shell.GetFolder(SHF_STARTMENUPROGRAMS);s2 = String.Concat(s1, "\\*\\TODO");//将*替换成项目名F ...

  6. yeoman 介绍、安装 和 使用

    一.介绍.安装 1, 是什么 Yeoman其实是3个工具的总和: ü  yo --- 脚手架,自动生成工具 ü  Grunt.gulp --- 构建工具 (最初只有grunt,后面gulp火了添加进来 ...

  7. 一百一十五、脱离SAP本体，通过ActiveX读取SAP表中数据

    一.Sap自带有客户端,但是非常之臃肿卡顿,可以利用ActiveX的方式,脱离Sap本体,来读取Sap表中的内容进行插入等操作,非常之方便.代码如下: 二.界面如下,输入好相关内容,点击登录,提示登录 ...

  8. Angular 学习1

    AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字.运 ...

  9. JAVA - SpringBoot项目引用MyBatis操作数据库

    JAVA - SpringBoot项目引用MyBatis操作数据库 1. 创建SpringBoot项目,参考:https://www.cnblogs.com/1285026182YUAN/p/1232 ...

  10. H5页面跳转到小程序代码

    1.H5页面加代码直接打开小程序 <script type="text/javascript src="https://res.wx.qq.com/open/js/jweix ...