友情提醒：閱讀本文需要瞭解一些基本的html/Css/Javascript知識 前端常用tab鍵的實現，用到的原理是當點擊一個元素時，通過javascript操作css的display屬性，達到控制另一個元素的顯示(display: block)與不顯示(display: none) 需要註意的是， ...
友情提醒：閱讀本文需要瞭解一些基本的html/Css/Javascript知識
前端常用tab鍵的實現，用到的原理是當點擊一個元素時，通過javascript操作css的display屬性，達到控制另一個元素的顯示(display: block)與不顯示(display: none)
需要註意的是，由於使用的是onclick事件，該事件點擊後會導致刷新，從而將原本應該從點擊事件中獲得顯示的元素重置，回到初始隱藏狀態。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test tabs 04</title> 6 <style type="text/css"> 7 a { 8 text-decoration: none; 9 } 10 #content01 { 11 display:none; 12 } 13 #content02 { 14 display: none; 15 } 16 .tab_Btn { 17 display: inline-block; 18 width: 100px; 19 height: 40px; 20 color: black; 21 background: orange; 22 padding-top: 5px; 23 text-align: center; 24 line-height: 40px; 25 } 26 </style> 27 </head> 28 <body> 29 <div> 30 <a class="tab_Btn" href="" onclick="showTabs(tab01);return false;">Tab1</a> 31 <a class="tab_Btn" href="" onclick="showTabs(tab02);return false;">Tab2</a> 32 <!-- 需要加return false 否則onclick事件會自動刷新 content又會預設置為display:none --> 33 </div> 34 <!-- content內容為預設隱藏的內容 --> 35 <div class="content" id="content01"> 36 <p>Tab1 content</p> 37 </div> 38 <div class="content" id="content02"> 39 <p>Tab2 content</p> 40 </div> 41 <script type="text/javascript"> 42 var tab01 = document.getElementById("content01"); 43 var tab02 = document.getElementById("content02"); 44 //console.log(tab01); 45 46 function showTabs(tab) { 47 if (tab01 == tab){ 48 tab01.style.display = "block"; 49 tab02.style.display = "none"; 50 } 51 else{ 52 tab02.style.display = "block"; 53 tab01.style.display = "none"; 54 } 55 } 56 </script> 57 </body> 58 </html>
