JavaScript实现标签页切换效果
更新时间：2021年10月26日 17:13:26 作者：秦浩铖
这篇文章主要为大家详细介绍了JavaScript实现标签页切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现标签页切换效果的具体代码，供大家参考，具体内容如下
构建主体界面
HTML代码
<h1>实现标签页的切换效果</h1>
<ul id="tab">
<li><a href="">影视</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">电视剧</a></li>
</ul>
<div id="content">
<div id="content1">最新电影推荐：<br>《速度与激情》<br> 《超能陆战队》</div>
<div id="content2">火爆娱乐推荐：<br>《奔跑吧兄弟》<br> 《中国好声音》</div>
<div id="content3">热门电视剧推荐：<br>《三生三世》<br> 《我们的少年时代》</div>
</div>
编写 CSS 文件
新建 CSS 文件，编写CSS 代码渲染之前编写的 HTML 界面。
记得在 HTML 文件中引入编写的 CSS 文件。
<link rel="stylesheet" href="mCSS.css" >
CSS 文件代码
*{
margin: 0;
padding: 0;
}
#tab {
overflow: hidden;
}
#tab li {
float: left;
list-style: none;
width: 80px;
height: 40px;
text-align: center;
}
#tab li:first-child, #content1 {
background: #ffcc00;
}
#tab li:first-child + li, #content2 {
background: #ff00cc;
}
#tab li:last-child, #content3 {
background: #00ccff;
}
#tab li a {
line-height: 40px;
color: white;
text-decoration: none;
}
#content {
position: relative;
}
#content1, #content2, #content3 {
width: 300px;
height: 100px;
position: absolute;
top: 0;
left: 0;
padding: 30px;
display: none;
}
#content1{
display: block;
}
编写 JavaScript 脚本文件，实现切换效果
JavaScript 代码
// 当点某一个标签的时候对应的 div 显示，其他的隐藏。
// 查找触发事件的元素
var as = document.querySelectorAll("#tab a");
// 绑定事件处理函数
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
// 隐藏所有的 div
var divs = document.querySelectorAll("#content>div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
// 让对应的 div显示
// 获取当前的 a 的 href
var i = this.href.lastIndexOf("#");
var id = this.href.slice(i);
console.log(id)
document.querySelector(id).style.display = "block";
}
}
完整案例代码
mHTML.html
<link rel="stylesheet" href="mCSS.css" >
<h1>实现标签页的切换效果</h1>
<ul id="tab">
<li><a href="#content1" >影视</a></li>
<li><a href="#content2" >娱乐</a></li>
<li><a href="#content3" >电视剧</a></li>
</ul>
<div id="content">
<div id="content1">最新电影推荐：<br>《速度与激情》<br> 《超能陆战队》</div>
<div id="content2">火爆娱乐推荐：<br>《奔跑吧兄弟》<br> 《中国好声音》</div>
<div id="content3">热门电视剧推荐：<br>《三生三世》<br> 《我们的少年时代》</div>
</div>
<script src="mJS.js"></script>
mCSS.css
*{
margin: 0;
padding: 0;
}
#tab {
overflow: hidden;
}
#tab li {
float: left;
list-style: none;
width: 80px;
height: 40px;
text-align: center;
}
#tab li:first-child, #content1 {
background: #ffcc00;
}
#tab li:first-child + li, #content2 {
background: #ff00cc;
}
#tab li:last-child, #content3 {
background: #00ccff;
}
#tab li a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
color: white;
text-decoration: none;
}
#content {
position: relative;
}
#content1, #content2, #content3 {
width: 300px;
height: 100px;
position: absolute;
top: 0;
left: 0;
padding: 30px;
display: none;
}
#content1{
display: block;
}
mJS.js
// 当点某一个标签的时候对应的 div 显示，其他的隐藏。
// 查找触发事件的元素
var as = document.querySelectorAll("#tab a");
// 绑定事件处理函数
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
// 隐藏所有的 div
var divs = document.querySelectorAll("#content>div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
// 让对应的 div显示
// 获取当前的 a 的 href
var i = this.href.lastIndexOf("#");
var id = this.href.slice(i);
console.log(id)
document.querySelector(id).style.display = "block";
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了js中隐藏/显示密码的Zepto的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了详解webpack es6 to es5支持配置 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
JavaScript中,可以使用解构赋值的方式来对数组或者对象进行变量解构,下面小编就来为大家详细介绍一下JavaScript实现数组或者对象解构的方法吧2023-11-11
JavaScript写的炫光波动效果,看到一些Flash效果不错,用JS也模拟一下,还有很多不完善的地方,给各位参考参考。2015-05-05
event是ie自带的一个对象，而ff中不存在该对象，只能通过传递参数的方式来模拟event，：（2009-09-09
这篇文章主要介绍了JS如何实现网站内容如何实现禁止复制和粘贴、另存为,需要的朋友可以参考下2014-02-02
生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号，具体的实现过程如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
在小程序中实现埋点的基本思路是利用生命周期函数和事件回调,插入数据上报代码,下面将介绍如何在小程序中实现埋点,并通过代码示例进行说明,感兴趣的朋友一起看看吧2024-04-04
这篇文章主要给大家介绍了关于如何在js中计算两个时间段重叠的时长问题的相关资料,判断两个时间段是否重叠可以通过比较两个时间段的开始时间和结束时间来实现,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了JsRender实用入门实例,包含了tag else使用、循环嵌套访问父级数据等知识点,并提供了完整的实例下载,非常具有实用价值,需要的朋友可以参考下2014-10-10
最新评论