JavaScript实现标签页切换效果
程序员文章站
2022-06-26 11:25:22
本文实例为大家分享了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"; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。