【前端学习】网页tab键的实现 01
程序员文章站
2023-03-26 20:56:19
友情提醒：阅读本文需要了解一些基本的html/Css/Javascript知识 前端常用tab键的实现，用到的原理是当点击一个元素时，通过javascript操作css的display属性，达到控制另一个元素的显示(display: block)与不显示(display: none) 需要注意的是， ......
友情提醒：阅读本文需要了解一些基本的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 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>
上一篇： vue基础用法
下一篇： go 中recover捕获异常