【前端学习】网页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>