JavaScript CSS 实现简单的 TAB 标签切换
使用CSS隐藏所有tab页，然后使用JavaScript给选中的元素对应ID的tab页设置class="active"类来显示该元素，以此实现tab切换。
如鼠标放置到shwww时，其data-id对应的属性为#cate1，然后使用选择器选中该id对应的元素并设置类属性，完整demo代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.tab-index, .tab {
list-style: none;
}
.tab-index li {
display:inline-block;
border: 1px black solid;
}
/* 先隐藏所有的tab标签元素 */
.tab ul {
display: none;
}
/* 显示激活的（class='active'）tab标签 */
.tab .active {
display: block;
}
</style>
<!-- tab标签 -->
<ul class="tab-index">
<li data-id="#cate1">shwww</li>
<li data-id="#cate2">warchina</li>
<li data-id="#cate3">ldf</li>
</ul>
<!-- 详细内容 -->
<div class="tab">
<ul id="cate1">
<li>https://www.shwww.net</li>
</ul>
<ul id="cate2">
<li>http://www.warchina.com</li>
</ul>
<ul id="cate3">
<li>https://www.ldfldf.com</li>
</ul>
</div>
<script>
// 页面加载时，选中第一个元素并为其设置 class="active" ，使第一个元素可以显示
document.querySelector('.tab ul:first-child').setAttribute('class', 'active'
);
// 响应事件，鼠标移动或者点击元素时的事件处理函数
const eventHandler = function (event) {
document.querySelector('.tab .active').removeAttribute('class'); // 先将之前显示的标签隐藏
const targetId = event.target.dataset['id']; // 取得需要显示的tab的 id
document.querySelector(targetId).setAttribute('class', 'active'); // 显示该id的tab标签
};
const elements = document.querySelectorAll('.tab-index li'); // 选中所有需要绑定响应事件的元素
for (let i = 0; i < elements.length; i++) {
elements[i].addEventListener('mouseover', eventHandler); // 绑定事件处理函数
}
</script>
</body>
</html>
JavaScript CSS 实现简单的 TAB 标签切换的更多相关文章
- 每天一个JavaScript实例-tab标签切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JS特效之Tab标签切换
在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...
- JS 实现 Tab标签切换功能
Tab标签切换 效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
- Bootstrap——设置Tab标签切换
最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...
- Vue指令：v-for的用法；v-bind绑定class的几种写法；tab标签切换
一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...
- jQuery蓝色修边tab标签切换
jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...
- 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图
SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...
- tab标签切换（无炫效果，简单的显示隐藏）
从最简单的效果开始写起,一个简单的JQ写出tab切换效果,很静态,没有任何的轮转特效,单纯的点击标签显示区域块. 附上代码: HTML: <div class="wrapper&quo ...
- 很好用的Tab标签切换功能，延迟Tab切换。
一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...
随机推荐
- Android自己定义控件之轮播图控件
背景 近期要做一个轮播图的效果.网上看了几篇文章.基本上都能找到实现,效果还挺不错,可是在写的时候感觉每次都要单独去又一次在Activity里写一堆代码.于是自己封装了一下.这里仅仅是做了下封装成一个 ...
- 命令行使用Eclipse的debug签名失败“找不到 xx.keystore证书链”
1.debug签名位置 2.查看debug.keystore具体信息 3.使用命令行签名 注意:debug签名password为android 4.出错原因是签名的别名写错,应为androiddebu ...
- Code Coverage and Unit Test in SonarQube
概念 https://blog.ndepend.com/guide-code-coverage-tools/ Code Coverage Results Import (C#, VB.NET) Uni ...
- nyoj--102--次方求模（快速幂）
次方求模 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 求a的b次方对c取余的值 输入 第一行输入一个整数n表示测试数据的组数(n<100) 每组测试只有一行,其 ...
- HBase学习----windows10下使用eclipse搭建HBase的开发环境
以下是我搭建HBase开发环境的一些心得(windows10) 0.安装JDK和eclipse和一个可用的HBase. 这步是最基础的,在此就不赘述了 1.创建一个java项目: 基础问题,不赘述. ...
- MSDN性能分析相关网站收集
Visual Studio 性能分析初学者指南 | Microsoft Docshttps://docs.microsoft.com/zh-cn/visualstudio/profiling/begi ...
- TensorFlow-正弦函数拟合
MNIST的代码还是有点复杂,一大半内容全在搞数据,看了半天全是一滩烂泥.最关键的是最后输出就是一个accuracy,我根本就不关心你准确率是0.98还是0.99好吗?我就想看到我手写一个5,你程序给 ...
- Struts2框架学习(二)——访问流程及架构
1.Struts2的执行流程 从客户端发送请求过来,先经过前端控制器(核心过滤器StrutsPrepareAndExecuteFilter)过滤器中执行一组拦截器(一组拦截器就会完成部分功能代码),拦 ...
- 谈谈c++中继承中的虚函数
c++继承中的虚函数 c++是一种面向对象的编程语言的一个很明显的体现就是对继承机制的支持,c++中继承分很多种,按不同的分类有不同分类方法,比如可以按照基类的个数分为多继承和单继承,可以按照访问 ...
- vsftp进阶-锁定目录
把用户锁定到特定的目录下面: 一.配置文件: #grep -Ev "^#|^$" /etc/vsftpd/vsftpd.conf anonymous_enable=NOlocal_ ...