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

友情提醒:阅读本文需要了解一些基本的html/Css/Javascript知识

前端常用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 04title>
 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;">Tab1a>
31         <a class="tab_Btn" href="" onclick="showTabs(tab02);return false;">Tab2a>
32         
33     div>
34     
35     <div class="content" id="content01">
36         <p>Tab1 contentp>
37     div>
38     <div class="content" id="content02">
39         <p>Tab2 contentp>
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>

 

【前端学习】网页tab键的实现 01_第1张图片

你可能感兴趣的:(【前端学习】网页tab键的实现 01)