【前端學習】網頁tab鍵的實現 01

時間 2019-12-19

原文原文鏈接

友情提醒：閱讀本文須要瞭解一些基本的html/Css/Javascript知識javascript

前端經常使用tab鍵的實現，用到的原理是當點擊一個元素時，經過javascript操做css的display屬性，達到控制另外一個元素的顯示(display: block)與不顯示(display: none)css

須要注意的是，因爲使用的是onclick事件，該事件點擊後會致使刷新，從而將本來應該從點擊事件中得到顯示的元素重置，回到初始隱藏狀態。html

 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>