CSS Tab栏切换

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7     <title>Document</title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;    
12             box-sizing: border-box;        
13         }
14         li{
15             list-style-type:none
16         }
17         a{
18             text-decoration: none;
19             color:111
20         }
21         .box{
22             position: relative;
23             width: 400px;
24             height: 500px;
25             margin: 10px auto;
26             background-color: #ccc;
27         }
28         .nav{
29             height: 50px;
30             width: 400px;
31             display: flex;
32             flex-direction: row;
33             justify-content:space-around;
34             align-items:center;             
35         }
36         .content{
37             width: 400px;
38             height: 450px;
39             border-top:2px solid #fff ;    
40         }
41         .content1,.content2,.content3,.content4{
42             display: none;
43             word-break: break-word;
44             word-wrap: break-word;
45         }
46         .content1:target,.content2:target,.content3:target,.content4:target{
47             display: block;
48         }
49     </style>
50 </head>
51 <body>
52     <div class="box">
53         <ul class="nav">
54             <li><a href="#content1">11</a></li>
55             <li><a href="#content2">22</a></li>
56             <li><a href="#content3">33</a></li>
57             <li><a href="#content4">44</a></li>
58         </ul>
59         <div class="content">
60             <div class="content1" id="content1">
61                 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
62             </div>
63             <div class="content2" id="content2">
64                 222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
65             </div>    
66             <div class="content3" id="content3">
67                 333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
68             </div>
69             <div class="content4" id="content4">
70                 44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
71             </div>
72         </div>
73     </div>
74     
75     <script type="text/javascript">
76         document.location.href="#content1";//开始时让内容一显示
77     </script>
78 </body>
79 </html>

代码如上

css3实现tab栏切换主要用到a标签的target属性

js代码只用了一句

　　 document.location.href="#content1";

如果不写这句content内容区开始是空白的

CSS Tab栏切换

相关推荐