友情提醒：阅读本文需要了解一些基本的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>
