選項卡（tab欄切換） 1 <style type="text/css"> 2 *{margin: 0; padding: 0; font-family: "微軟雅黑";font-size: 14px;} 3 #container{ 4 width: 398px; 5 margin: 100px a ...
選項卡（tab欄切換）
1 <style type="text/css"> 2 *{margin: 0; padding: 0; font-family: "微軟雅黑";font-size: 14px;} 3 #container{ 4 width: 398px; 5 margin: 100px auto;} 6 #container a{ 7 display:block ; 8 width: 98px; 9 height: 42px; 10 line-height: 42px; 11 text-align: center; 12 float: left; 13 border-top: solid 1px #FF4400; 14 border-bottom: solid 1px #FF4400; 15 border-left: solid 1px #FF4400; 16 color: #333333; 17 text-decoration: none; 18 } 19 #container a:hover{ 20 color: #FF4400; 21 } 22 .content{ 23 width: 355px; 24 height: 140px; 25 text-align: center; 26 border-right: solid 1px #FF4400; 27 border-bottom: solid 1px #FF4400; 28 border-left: solid 1px #FF4400; 29 padding: 30px 0 0 40px; 30 display: none; 31 } 32 .clear{clear: left;} 33 #container a.on{ background: #FF4400; color: #fff;} 34 </style> 35 36 </head> 37 <body> 38 <div id="container"> 39 <a href="#" class="on">充話費</a> 40 <a href="#">充流量</a> 41 <a href="#">充固話</a> 42 <a href="#" style="border-right: solid 1px #FF4400;">充寬頻</a> 43 44 <div class="clear"></div> 45 46 <div class="content" style="display:block;"> 47 <img src="images/1.png" /> 48 </div> 49 <div class="content"> 50 <img src="images/2.png" /> 51 </div> 52 <div class="content"> 53 <img src="images/3.png" /> 54 </div> 55 <div class="content"> 56 <img src="images/4.png" /> 57 </div> 58 </div> 59 </body> 60 </html> 61 <script type="text/javascript"> 62 //排他思想：讓所有的類名和樣式都去掉， 讓自己加類名，讓自己對用的div顯示 63 var container = document.getElementById("container"); 64 var allA = container.getElementsByTagName("a"); 65 var con = container.getElementsByClassName("content"); 66 for(var i = 0; i < allA.length; i++){//給所有的a標簽綁定點擊事件 67 allA[i].index = i;//在每一個a身上加個自定義屬性index，index存的是自己對應的下標 68 allA[i].onclick = function(){ 69 for(var j = 0; j < allA.length; j++){ 70 allA[j].className = ""; 71 con[j].style.display = "none"; 72 } 73 this.className = "on"; 74 con[this.index].style.display = "block"; 75 } 76 } 77 </script>
