昨夜星辰5
2016-06-07 18:05
<!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> ul{ padding:0; } ul li{ list-style: none; } ul.tab-title{ margin: 0; } ul.tab-title li{ display: inline-block; width: 60px; height: 26px; line-height: 26px; text-align: center; padding: 5px; border: thin solid #ccc; border-bottom: none; cursor: pointer; position: relative; } ul.tab-title li.active{ border-top: 2px solid #8B4412; border-bottom: 2px solid #fff; cursor: pointer; z-index: 9999; } .tab-content{ position: relative; top: -2px; border: thin solid #4B78A5; border-top: 2px solid #8B4412; width: 340px; z-index: 0; } .tab-content ul{ padding-left: 5px; display: none; } .tab-content ul li{ cursor: pointer; } .tab-content ul.active{ display: block; } </style> </head> <body> <div class="nav-tab"> <ul class="tab-title"> <li class="active" id="tab-1">房产</li> <li id="tab-2">家居</li> <li id="tab-3">二手房</li> </ul> <div class="tab-content"> <ul class="active"> <li>275万购昌平邻铁三居 总价20万买一居</li> <li>200万内购五环三居 140万安家东三环</li> <li>北京首现零首付楼盘 53万购东5环50平</li> <li>京楼盘直降5000 中信府 公园楼王现房</li> </ul> <ul> <li>40平出租屋大改造 美少女的混搭小窝</li> <li>经典清新简欧爱家 90平老房焕发新生</li> <li>新中式的酷色温情 66平撞色活泼家居</li> <li>瓷砖就像选好老婆 卫生间烟道的设计</li> </ul> <ul> <li>通州豪华3居260万 二环稀缺2居250w甩</li> <li>西3环通透2居290万 130万2居限量抢购</li> <li>黄城根小学学区仅260万 121平70万抛!</li> <li>独家别墅280万 苏州桥2居优惠价248万</li> </ul> </div> </div> <script type="text/javascript"> var tab = document.getElementsByClassName('tab-title')[0]; tab = tab.getElementsByTagName('li'); var content = document.getElementsByClassName('tab-content')[0]; var content = content.getElementsByTagName('ul'); for (var i = 0; i < tab.length; i++){ tab[i].addEventListener('click', function(){ removeClass(tab); this.className = 'active'; var id = this.getAttribute('id'); var index = id.split('-')[1]; removeClass(content); content[index-1].className="active"; }); } function removeClass(obj){ for (var i = 0; i < obj.length; i++){ if (obj[i].className != '') { obj[i].className = ''; } } } </script> </body> </html>
大家拿去参考!
JavaScript进阶篇
468868 学习 · 22582 问题
相似问题
回答 1