选项卡的切换是页面中最常见的一种效果。JS负责实现页面的逻辑。
效果图：
基本思路：
完整代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>实践题 - 选项卡</title><style type="text/css">/* CSS样式制作 */*{font:12px/1.5em 微软雅黑,sans-serif;padding:0;margin:0;}#tabs{width:300px;height:170px;padding:5px;margin:18px;}#table{height:30px;display:block;list-style:none;//清除圆点,没有好像也可以；}#table li{cursor:pointer;//修改指针为手指形状，让人误以为这是可点击，然后在js上添加点击事件float:left;text-align:center;line-height:28px;width:60px;height:28px;margin:0,0,0,3px;display:inline-block;background:#fff;}.li1{border:1px solid #ccc;border-top:2px solid red;border-bottom:2px solid #fff;}.li2{border:1px solid #ccc;border-bottom:0px; }#tabs div{border:1px solid blue;border-top:2px solid red;background:#fff;height:120px;padding:10px;line-height:25px;}.box1{display:block;}.box2{display:none;}</style><script type="text/javascript">window.onload=function(){var x=document.getElementById("tabs");//大盒子节点var a=document.getElementsByTagName("li");//li节点数组var b=x.getElementsByTagName("div"); //div节点数组for(i=0;i<a.length;i++){a[i].index=i;//列表项的索引位置a[i].onmouseover=function()//onclick也一样;鼠标经过事件{for(i=0;i<a.length;i++){a[i].className="li2";b[i].className="box2";}a[this.index].className="li1";//li1为显示，this为触发事件的当前元素b[this.index].className="box1";//box1为显示}//先隐藏所有，再显示当前；}}//JS实现选项卡切换</script></head><body><!-- HTML页面布局 --><div><ul><li >房产</li><li >家居</li><li >二手房</li></ul> <div>275万购昌平邻铁三居 总价20万买一居<br>200万内购五环三居 140万安家东三环<br>北京首现零首付楼盘 53万购东5环50平<br>京楼盘直降5000 中信府 公园楼王现房<br></div><div>40平出租屋大改造 美少女的混搭小窝<br>经典清新简欧爱家 90平老房焕发新生<br>新中式的酷色温情 66平撞色活泼家居<br>瓷砖就像选好老婆 卫生间烟道的设计<br></div><div>通州豪华3居260万 二环稀缺2居250w甩<br>西3环通透2居290万 130万2居限量抢购<br>黄城根小学学区仅260万 121平70万抛!<br>独家别墅280万 苏州桥2居优惠价248万<br></div></div></body></html>
