利用JavaScript,實現卡片切換的效果
阿新 • • 發佈：2019-01-25
慕課網JS程式設計任務：利用JavaScript知識，實現選項卡切換的效果。
最終要實現的效果：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>實踐題 - 選項卡</title> <style type="text/css"> /* CSS樣式製作 */ *{ margin:0; padding:0; font:normal 12px "微軟雅黑"; color:#000000;} /*去掉列表前面的標記*/ ul{list-style-type: none;} /*去掉超連結的下劃線*/ a{text-decoration: none;} #tab-list{ width:275px;height:190px;margin:20px auto; } /*設定標題底部邊框，實體紅色2px，高度為32px*/ #ul1{border-bottom: 2px solid #8B4513;height: 32px;} /*設定標題內容為內聯塊狀元素（不換行，可設定寬和高），寬度、行高、居中、邊框：黑色實體1px、不要底邊框、間隔為5*/ #ul1 li{display: inline-block; width: 60px; line-height: 30px; text-align: center; border: 1px solid #999; border-bottom: none; margin-left: 5px;} /*選擇滑鼠指標浮動在其上的元素，並設定其樣式*/ #ul1 li:hover{cursor: pointer;} /*選擇活動連結，並設定它的樣式：*/ #ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;} .active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;} /*選項卡內容邊框設定*/ #tab-list div{border: 1px solid #7396B8;border-top: none;} #tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;} .hide{ display:none; } .show{ display:block; } </style> <script type="text/javascript"> // JS實現選項卡切換 window.onload = function() { //獲取相應的元素 var oUl1 = document.getElementById("ul1"); var aLi = oUl1.getElementsByTagName("li"); var oDiv = document.getElementById("tab-list"); var aDiv = oDiv.getElementsByTagName("div"); for(var i = 0; i < aLi.length; i++) { //程式執行後，i的值始終為aLi.length+1，所以要儲存一下索引，保證正確呼叫 aLi[i].index = i; //this代表呼叫函式的物件 aLi[i].onmouseover = function() { for(var i=0;i<aLi.length;i++){ aLi[i].className=""; } this.className="active"; for(var i=0;i<aDiv.length;i++){ aDiv[i].className="hide"; } aDiv[this.index].className = "show"; } } } </script> </head> <body> <!-- HTML頁面佈局 --> <div id="tab-list"> <ul id="ul1"> <li >房產</li> <li >家居</li> <li >二手房</li> </ul> <div> <ul> <li><a href="javascript:;">275萬購昌平鄰鐵三居 總價20萬買一居</a></li> <li><a href="javascript:;">200萬內購五環三居 140萬安家東三環</a></li> <li><a href="javascript:;">北京首現零首付樓盤 53萬購東5環50平</a></li> <li><a href="javascript:;">京樓盤直降5000 中信府 公園樓王現房</a></li> </ul> </div> <div class="hide"> <ul> <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窩</a></li> <li><a href="javascript:;">經典清新簡歐愛家 90平老房煥發新生</a></li> <li><a href="javascript:;">新中式的酷色溫情 66平撞色活潑家居</a></li> <li><a href="javascript:;">瓷磚就像選好老婆 衛生間煙道的設計</a></li> </ul> </div> <div class="hide"> <ul> <li><a href="javascript:;">通州豪華3居260萬 二環稀缺2居250w甩</a></li> <li><a href="javascript:;">西3環通透2居290萬 130萬2居限量搶購</a></li> <li><a href="javascript:;">黃城根小學學區僅260萬 121平70萬拋!</a></li> <li><a href="javascript:;">獨家別墅280萬 蘇州橋2居優惠價248萬</a></li> </ul> </div> </div> </body> </html>