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内容区开始是空白的