JS特效樣例練習
阿新 • • 發佈：2018-12-25
<!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; } #ul1 { border-bottom: 2px solid #8B4513; height: 32px; } #ul1 li { display: inline-block; width: 60px; line-height: 30px; text-align: center; border: 1px solid #ddd; border-bottom: none; margin-left: 20px; } #ul1 li:hover { cursor: pointer; } #ul1 li.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; } .show { display: block; } .hide { display: none; } </style> <script type="text/javascript"> 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++) { aLi[i].index = i; aLi[i].onmouseover = function() { for (var i = 0; i < aLi.length; i++) { aLi[i].className = ""; } this.className = "active"; for (var j = 0; j < aDiv.length; j++) { aDiv[j].className = "hide"; } aDiv[this.index].className = "show"; } } } </script> </head> <body> <!-- HTML頁面佈局 --> <div id="tab-list"> <ul id="ul1"> <li class="active">房產</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>