前端常用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 <div class="content" id="content01"> 35 <p>Tab1 content</p> 36 </div> 37 <div class="content" id="content02"> 38 <p>Tab2 content</p> 39 </div> 40 <script type="text/javascript"> 41 var tab01 = document.getElementById("content01"); 42 var tab02 = document.getElementById("content02"); 43 //console.log(tab01); 44 45 function showTabs(tab) { 46 if (tab01 == tab){ 47 tab01.style.display = "block"; 48 tab02.style.display = "none"; 49 } 50 else{ 51 tab02.style.display = "block"; 52 tab01.style.display = "none"; 53 } 54 } 55 </script> 56 </body> 57 </html>
效果可参考下面的动图
原文：https://www.cnblogs.com/ataehee/p/12063352.html