本文介绍如何使用JavaScript结合HTML和CSS实现标签页切换功能。通过定义HTML结构、设置CSS样式以及编写JavaScript事件处理逻辑，实现点击不同标签时对应内容区域的显示与隐藏。
JavaScript实现标签页切换效果
本文分享了一段JavaScript实现标签页切换效果的代码示例，供读者参考学习。
构建主体界面
首先构建页面的主体界面结构。
HTML代码
接下来编写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文件，在其中编写相应的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脚本文件，用于实现标签页的动态切换效果。
以下是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";
}
}
完整案例代码
最后提供完整的案例代码，包含HTML、CSS和JavaScript部分。
HTML文件名为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>CSS文件名为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;
}JavaScript文件名为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";
}
}以上就是本文的全部内容，希望对读者有所帮助，欢迎继续支持本站。