七、JavaScript總結——實現選項卡切換的效果

時間 2020-06-09

標籤 javascript 總結實現選項切換效果欄目 JavaScript 简体版

原文原文鏈接

閱讀目錄（原創-萌小Q）javascript

編程挑戰
分析

編程挑戰

如今利用以前咱們學過的JavaScript知識，實現選項卡切換的效果。css

效果圖:html

文字素材:java

房產：編程

275萬購昌平鄰鐵三居總價20萬買一居
200萬內購五環三居 140萬安家東三環
北京首現零首付樓盤 53萬購東5環50平
京樓盤直降5000 中信府公園樓王現房ide

家居:佈局

40平出租屋大改造美少女的混搭小窩
經典清新簡歐愛家 90平老房煥發新生
新中式的酷色溫情 66平撞色活潑家居
瓷磚就像選好老婆衛生間煙道的設計this

二手房：spa

通州豪華3居260萬二環稀缺2居250w甩
西3環通透2居290萬 130萬2居限量搶購
黃城根小學學區僅260萬 121平70萬拋!
獨家別墅280萬蘇州橋2居優惠價248設計

分析

你們先思考和分析實現思路，而後在動手實現

1、HTML頁面佈局

提示:
選項卡標題使用ul..li
選項卡內容使用div

2、CSS樣式製做

提示:
整個選項卡的樣式設置
選項卡標題的樣式設置
選項卡內容的樣式設置
一開始只顯示一個選項卡內容，其它選項卡內容隱藏。

3、JS實現選項卡切換

提示:
獲取選項卡標題和選項卡內容
選項卡內容多個，須要循環遍從來操做，得知哪一個選項卡和哪一個選項內容匹配
經過改變DOM的css類名稱,當前點擊的選項卡顯示，其它隱藏。

代碼實現：

複製代碼 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>實踐題 - 選項卡</title>
 6     <style type="text/css">
 7         *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";} 8 #tabs {width:290px;padding:5px;height:150px;margin:20px;} 9         #tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;} 10         #tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;} 11         #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;} 12         #tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;} 13 .hide{display: none;} 14     </style>
15     <script type="text/javascript">
16          window.onload = function(){ 17              var oTab = document.getElementById("tabs"); 18              var oUl = oTab.getElementsByTagName("ul")[0]; 19              var oLis = oUl.getElementsByTagName("li"); 20              var oDivs= oTab.getElementsByTagName("div"); 21 
22              for(var i= 0,len = oLis.length;i<len;i++){ 23                  oLis[i].index = i; 24                  oLis[i].onclick = function() { 25                      for(var n= 0;n<len;n++){ 26                          oLis[n].className = ""; 27                          oDivs[n].className = "hide"; 28 } 29                      this.className = "on"; 30                      oDivs[this.index].className = ""; 31 } 32 }; 33 } 34     </script>
35 
36 </head>
37 <body>
38 <div id="tabs">
39     <ul>
40         <li class="on">房產</li>
41         <li>家居</li>
42         <li>二手房</li>
43     </ul>
44     <div>
45         275萬購昌平鄰鐵三居 總價20萬買一居<br>
46         200萬內購五環三居 140萬安家東三環<br>
47         北京首現零首付樓盤 53萬購東5環50平<br>
48         京樓盤直降5000 中信府 公園樓王現房<br>
49     </div>
50     <div class="hide">
51         40平出租屋大改造 美少女的混搭小窩<br>
52         經典清新簡歐愛家 90平老房煥發新生<br>
53         新中式的酷色溫情 66平撞色活潑家居<br>
54         瓷磚就像選好老婆 衛生間煙道的設計<br>
55 
56     </div>
57     <div class="hide">
58         通州豪華3居260萬 二環稀缺2居250w甩<br>
59         西3環通透2居290萬 130萬2居限量搶購<br>
60         黃城根小學學區僅260萬 121平70萬拋!<br>
61         獨家別墅280萬 蘇州橋2居優惠價248萬<br>
62 
63     </div>
64 </div>
65 
66 </body>
67 </html>
複製代碼

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。