Friendly reminder: you need to know some basic html/Css/Javascript knowledge to read this article
The implementation of the front-end common tab key uses the principle that when clicking an element, the display attribute of css is operated through javascript to control the display (block) and display (none) of another element
It should be noted that the onclick event is used, which will cause a refresh after clicking, so as to reset the elements that should have been displayed from the click event and return to the original hidden state.
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 <!-- Need plus return false otherwise onclick Events will refresh automatically content It will default to display:none --> 33 </div> 34 <!-- content Content is hidden by default --> 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>
