JavaScript如何实现标签页切换效果

小编给大家分享一下JavaScript如何实现标签页切换效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

构建主体界面

HTML 代码

实现标签页的切换效果
    
影视
    
娱乐
    
电视剧
    
最新电影推荐：
《速度与激情》
 《超能陆战队》
    
火爆娱乐推荐：
《奔跑吧兄弟》
 《中国好声音》
    
热门电视剧推荐：
《三生三世》
 《我们的少年时代》

编写 CSS 文件

新建 CSS 文件，编写CSS 代码渲染之前编写的 HTML 界面。

记得在 HTML 文件中引入编写的 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

 
实现标签页的切换效果
    
影视
    
娱乐
    
电视剧
    
最新电影推荐：
《速度与激情》
 《超能陆战队》
    
火爆娱乐推荐：
《奔跑吧兄弟》
 《中国好声音》
    
热门电视剧推荐：
《三生三世》
 《我们的少年时代》
  

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";    } }

以上是"JavaScript如何实现标签页切换效果"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！