【前端学习】网页tab键的实现 01

前端常用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>

效果可参考下面的动图

【前端学习】网页tab键的实现 01

猜你喜欢