显示效果:

代码实现:

<!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. class(二)--派生类的继承

    前言 从我之前的一篇笔记对象的继承中, 我们可以知道JS的继承方式依赖原型链,而比较好的继承方式是寄生组合式继承 先来温习下什么是寄生组合式继承 function Rectangle(length, ...

  2. JAVA 使用模板创建DOCX文档)(XDocService 使用报错条数过多报错链接不上服务器)

    详细解释https://xdoc.iteye.com/blog/2399451 https://xdoc.iteye.com/  导入 XDocService.jar   我说一下我遇到的问题 我从数 ...

  3. 安卓Recycleview简单的网格布局-初学者的关键点

    导包 def supportVersion = '28.0.0' 定义常量我的sdk版本为28 implementation "com.android.support:recyclervie ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:响应式实用工具

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

  5. java中关键字super

    super关键字的作用 java中的super关键字是一个引用变量,用于引用父类对象.关键字“super”以继承的概念出现在类中. 主要用于以下情况:1.调用父类的方法   2.调用父类的变量  3. ...

  6. mybatis关于级联查询结果集嵌套映射对象非列表的处理问题

    工作中遇到这么一个问题,嵌套查询,返回json的时候,作为属性,deviceFields是一个device中的一个对象属性,在json返回的时候想要得到的应该是deviceFields:{ 具体属性} ...

  7. Jinja2语法小记

    jinja2模板语法小记 Jinja2模板中文文档 三种常见界定符 表达式 {{ ... }} 用于装载字符串.变量.函数调用等 语句 {% ... %} 用于装载控制语句,比如if判断.for循环等 ...

  8. 【转载】redis.windows.conf 参数说明

    1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2. 当Redis以守护进程方式运行时,Redis默认会把pid写入/var/ru ...

  9. Mac电脑上怎么设置环境变量

    https://jingyan.baidu.com/article/8065f87f47b29523312498e4.html 环境变量是电脑操作系统中常用的一些变量,作用类似于将一些常用命令所在的文 ...

  10. 【LeetCode】160. 相交链表

    题目 输入两个链表,找出它们的第一个公共节点. 如下面的两个链表: 在节点 c1 开始相交. 示例 1: 输入:intersectVal = 8, listA = [4,1,8,4,5], listB ...