<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
ul{
padding:0px;}
li{
width:65px;
height:35px;
text-align:center;
line-height:35px;
list-style-type:none;
border-left:2px solid #ccc;
border-top:2px solid #ccc;
border-right:2px solid #ccc;
float:left;
margin-left:8px;
}
#lichange{
border-top:1px solid #ccc;
}
div{
width:300px;
height:200px;
border-left:2px solid #ccc;
border-top:2px solid #FCF;
border-right:2px solid #ccc;
border-bottom:2px solid #ccc;
clear:both;
}
.hide{
display:none;
}
</style>
<script type="text/javascript">
function message(){
var choose=document.getElementsByTagName("li")
var text=document.getElementsByTagName("div")
for(var i=0;choose.length;i++){
choose[i].index=i;
choose[i].onclick=function(){
for(n=0;n<choose.length;n++){
choose[n].className="";
text[n].className="hide"
}
this.className="lichange"
text[this.index].className=""
}
}
}
// JS实现选项卡切换
</script>
</head>
<body>
<!-- HTML页面布局 -->
<ul>
<li onclick="message()">房产</li>
<li onclick="message()">家居</li>
<li onclick="message()">二手房</li>
</ul>
<div id="text1">
275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府 公园楼王现房
</div>
<div id="text2">
40平出租屋大改造 美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆 卫生间烟道的设计
</div>
<div id="text3">
通州豪华3居260万 二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万 苏州桥2居优惠价248万
</div>
</body>
</html>
怎么让默认后两个文本隐藏啊。还有选项卡下面的线怎么让他消失啊。。这事件的思路是什么？为什么不用case 事件而是遍历。。
默认就是自己定义一个class，加在想要隐藏的文本上，class内容为display:none;就隐藏了，在切换文本时通过修改class，隐藏其他两个(先全部设为那个隐藏的class，再把选中的文本class清除 className=""; )
加粗三个选项卡下面的边界线(设置为白色(背景色))覆盖掉那条线
思路：给三个选项卡安置事件
当鼠标点到当前选项卡时，对应文本显示，其他文本隐藏
当前选项卡底部边界线加粗覆盖掉下面的线，当前选项卡顶部边界线变粗(颜色改为和下面文本框边界一样)
其他选项卡恢复基础配置
就是说每个选项卡都有相同的基础配置，当被选中，有新的css属性加进来(原理跟隐藏的差不多)
遍历只是设置事件，真正起作用的是触发事件