JS實現選項卡切換

本文轉載自查看原文 2019-07-08 17:21 2202 Javascript

面是用JS簡單地實現選項卡功能的實例。

注意點：（1）閉包后，要使用立即執行函數；

（2）綁定事件注意參數；

（3）思路：將當前div顯示，其余隱藏，給button綁定事件，觸碰后顯示相應內容。

  1 <!DOCTYPE html>
  2 
  3 <html>
  4 
  5  
  6 
  7     <head>
  8 
  9         <meta charset="UTF-8">
 10 
 11         <title>選項卡練習</title>
 12 
 13         <!--CSS樣式-->
 14 
 15         <style type="text/css">
 16 
 17             .wrapper {
 18 
 19                 box-shadow: -2px 0 5px lightsteelblue, 0 -2px 5px lightsteelblue, 0 2px 5px lightsteelblue, 2px 0 5px lightsteelblue;
 20 
 21                 height: 450px;
 22 
 23                 width: 533px;
 24 
 25             }
 26 
 27             
 28 
 29             .content {
 30 
 31                 display: none;
 32 
 33                 width: 530px;
 34 
 35                 height: 395px;
 36 
 37                 margin-top: 8px;
 38 
 39                 box-shadow: -2px 0 5px gray, 0 -2px 5px gray, 0 2px 5px gray, 2px 0 5px gray;
 40 
 41             }
 42 
 43             /*點擊該按鈕的時候顯示該顏色*/
 44 
 45             
 46 
 47             .active {
 48 
 49                 background-color: lightsteelblue;
 50 
 51             }
 52 
 53             
 54 
 55             button {
 56 
 57                 background-color: lightseagreen;
 58 
 59                 margin-top: 5px;
 60 
 61                 list-style-type: none;
 62 
 63                 width: 125px;
 64 
 65                 height: 40px;
 66 
 67                 font-family: "新宋體";
 68 
 69                 font-size: 18px;
 70 
 71                 border: none;
 72 
 73                 box-shadow: -2px 0 5px lightsteelblue, 0 -2px 5px lightsteelblue, 0 2px 5px lightsteelblue, 2px 0 5px lightsteelblue;
 74 
 75             }
 76 
 77             
 78 
 79             button:first-child {
 80 
 81                 margin-left: 10px;
 82 
 83             }
 84 
 85         </style>
 86 
 87     </head>
 88 
 89  
 90 
 91     <body>
 92 
 93         <!--布局樣式-->
 94 
 95         <div class="wrapper">
 96 
 97             <!--選項卡-->
 98 
 99             <button class="active">選項卡一</button>
100 
101             <button>選項卡二</button>
102 
103             <button>選項卡三</button>
104 
105             <button>選項卡三</button>
106 
107             <div class="content" style="display: block;">
108 
109                 <img src="img/pic-one.png" />
110 
111             </div>
112 
113             <div class="content">
114 
115                 <img src="img/pic-two.png" />
116 
117             </div>
118 
119             <div class="content">
120 
121                 <img src="img/pic-three.png" />
122 
123             </div>
124 
125             <div class="content">
126 
127                 <img src="img/pic-fou.png" />
128 
129             </div>
130 
131         </div>
132 
133         <!--JS代碼-->
134 
135         <script type="text/javascript">
136 
137             // 將按鈕和盒子拿出來
138 
139             var btn = document.getElementsByTagName('button');
140 
141             var div = document.getElementsByClassName('content');
142 
143             // 每一個button上面綁定事件
144 
145             for(var n = 0; n < btn.length; n++) {
146 
147                 //生成閉包的立即函數
148 
149                 (function(i) {
150 
151                     btn[n].onclick = function() {
152 
153                         for(var m = 0; m < btn.length; m++) {
154 
155                             btn[m].className = ""; //清空效果
156 
157                             div[m].style.display = "none";
158 
159                         }
160 
161                         //當前點擊的button設置變化
162 
163                         this.className = "active";
164 
165                         div[i].style.display = "block";
166 
167                     }
168 
169                 }(n))
170 
171             }
172 
173         </script>
174 
175     </body>
176 
177 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue.js實現選項卡切換 js實現網頁tab選項卡切換效果 JS實現選項卡切換效果 js實現tab選項卡切換 Vue實現選項卡切換 JQ實現選項卡切換 HTML+JS+DOM【選項卡自動切換】 vue實現tab選項卡切換效果使用jquery實現選項卡切換效果 vue實現tab選項卡切換