编程挑战现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。效果图:文字素材:房产： 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 ...
编程挑战
现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。
效果图:
文字素材:
房产：
275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府 公园楼王现房
家居:
40平出租屋大改造 美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆 卫生间烟道的设计
二手房：
通州豪华3居260万 二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万 苏州桥2居优惠价248万
我的解答
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS综合练习-选项卡</title> <style type="text/css"> /* CSS样式制作 */ body, ul, li, a, ol{ margin: 0; padding: 0; } a{ text-decoration: none; color: #000; } li{ list-style: none; } .header{ overflow: hidden; width: 350px; } .header li{ float: left; margin-left: 10px; text-align: center; line-height: 30px; width: 98px; height: 30px; border: 1px solid #888; border-bottom: none; } .header .active{ border-top: 2px solid #8B4513; background-color: #fff; } .header li a{ display: block; height: 30px; width: 98px; } #content ul{ border: 1px solid #7396B8; border-top: 2px solid #8B4513; padding: 10px; width: 380px; height: 110px; position: relative; top: -2px; z-index: -1; } .notshow{ display: none; } </style> <script type="text/javascript"> // JS实现选项卡切换 window.onload=function () { var header = document.getElementById("header"); var lilist = header.getElementsByTagName("li"); for(var i=0;i<lilist.length;i++){ lilist[i].index = i; lilist[i].onclick = function () { var content = document.getElementById("content"); var ulist = content.getElementsByTagName("ul"); for(var k=0;k<lilist.length;k++){ lilist[k].setAttribute("class",""); ulist[k].setAttribute("class","notshow"); } this.setAttribute("class","active"); ulist[this.index].setAttribute("class",""); } } } </script></head><body><!-- HTML页面布局 --><ul id="header" > <li ><a href="#">房产</a></li> <li><a href="#">家居</a></li> <li><a href="#">二手房</a></li></ul><div id="content"> <ul> <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></body></html>
原标题：编程挑战JavaScript进阶篇（慕课网题目）
关键词：JavaScript
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
