JavaScript实现标签页切换效果
程序员文章站
2022-03-13 10:32:40
本文实例为大家分享了javascript实现标签页切换效果的具体代码，供大家参考，具体内容如下构建主体界面html 代码
实现标签页的切换效果
本文实例为大家分享了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";
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。