Shulou(Shulou.com)06/02 Report--

Editor to share with you how to achieve the tab switching effect of JavaScript, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Construct the main body interface

HTML code

To achieve the switching effect of tabs, film, television, entertainment, TV series, the latest movie recommendations:

"Speed and passion"

The hot entertainment recommendation of "Super Marines":

"run, bro."

Recommended by "The Voice of China" popular TV series:

Three lives and three generations

"our boyhood"

Write CSS files

Create a new CSS file and write CSS code to render the HTML interface written before.

Remember to introduce the written CSS file into the HTML file.

CSS file code

* {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;}

Write a JavaScript script file to achieve the switching effect

JavaScript code

/ / when you click on a tag, the corresponding div is displayed, and the others are hidden. / / find the element var as = document.querySelectorAll ("# tab a") that triggered the event; / / bind the event handler 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; iTunes +) {divs [I] .style.display =" none ";} / / Let the corresponding div display / / get the current a href var i = this.href.lastIndexOf (" # "); var id = this.href.slice (I) Console.log (id) document.querySelector (id). Style.display = "block";}} above is all the content of this article "how to achieve tab switching effect in JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.