JS实战篇
實現選項卡的選擇:
?
效果圖如下:
代碼如下:
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>選項卡的選擇Demo</title><style type="text/css">*{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}#tabs {width:290px;padding:5px;height:150px;margin:20px;}#tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}#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;}#tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}#tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}.hide{display: none;}</style><script type="text/javascript">window.onload = function(){var oTab = document.getElementById("tabs");var oUl = oTab.getElementsByTagName("ul")[0];var oLis = oUl.getElementsByTagName("li");var oDivs= oTab.getElementsByTagName("div");for(var i= 0,len = oLis.length;i<len;i++){oLis[i].index = i;oLis[i].onclick = function() {for(var n= 0;n<len;n++){oLis[n].className = "";oDivs[n].className = "hide";}this.className = "on";oDivs[this.index].className = "";}};}</script></head><body><div id="tabs"><ul><li class="on">房產</li><li>家居</li><li>二手房</li></ul><div>275萬購昌平鄰鐵三居 總價20萬買一居<br>200萬內購五環三居 140萬安家東三環<br>北京首現零首付樓盤 53萬購東5環50平<br>京樓盤直降5000 中信府 公園樓王現房<br></div><div class="hide">40平出租屋大改造 美少女的混搭小窩<br>經典清新簡歐愛家 90平老房煥發新生<br>新中式的酷色溫情 66平撞色活潑家居<br>瓷磚就像選好老婆 衛生間煙道的設計<br></div><div class="hide">通州豪華3居260萬 二環稀缺2居250w甩<br>西3環通透2居290萬 130萬2居限量搶購<br>黃城根小學學區僅260萬 121平70萬拋!<br>獨家別墅280萬 蘇州橋2居優惠價248萬<br></div> </div></body> </html>
?
轉載于:https://www.cnblogs.com/pengsi/p/6412615.html
總結
- 上一篇： 再爱我一次是什么歌啊？
- 下一篇： 【poj3420】 Quad Tilin