JavaScript實現標籤頁切換效果
阿新 • • 發佈:2021-10-27
本文例項為大家分享了實現標籤頁切換效果的具體程式碼,供大家參考,具體內容如下
構建主體介面
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> <http://www.cppcns.comdiv id="content2">火爆娛樂推薦:<br>《奔跑吧兄弟》<br> 《中國好聲音》</div> <div id="content3">熱門電視劇推薦:<br>《三生三世》<br> 《我們的少年時代》</div> </div>
編寫 檔案
新建 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; }
編寫 Script 檔案,實現切換效果
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="m.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,#content3 { 客棧 background: #00ccff; } #tab li a { display: block; width: 100%; height: 100%; line-height: 40px; color: 程式設計客棧white; text-decoration: none; } #content { position: relative; } #content1,#content3 { width: 300px; height: 100px; position: absolute; top: 0; left: 0; padding: 30px; display: http://www.cppcns.comnone; } #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"; } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。