JavaScript實現標簽頁切換效果
本文實例為大傢分享瞭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"; } }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。