根据这个慕课js编程练习做的一个选项卡切换,实现了粗略功能,很多细节没做到。希望朋友们能提出更正意见。
<!DOCTYPE HTML>
<!-- 用按钮实现选项卡,-->
<html content="text/html;charset=utf-8">
<head>
<title>网页选项卡的实现0</title>
<style type="text/css">
#div0{
border:1px blue solid;
width:350px;
border-top:2px #8B2500 solid;
}
li{
list-style-type:none;
//text-align:left;
}
</style>
<script type="text/javascript">
function selected(obj)
{
if(obj.value=="房产"){
var lis = document.getElementsByTagName("li");
lis[0].innerHTML = "275万购昌平邻铁三居 总价20万买一居";
lis[1].innerHTML = "200万内购五环三居 140万安家东三环";
lis[2].innerHTML = "北京首现零首付楼盘 53万购东5环50平";
lis[3].innerHTML = "京楼盘直降5000 中信府 公园楼王现房";
}else if(obj.value == "家居"){
var lis = document.getElementsByTagName("li");
lis[0].innerHTML = "40平出租屋大改造 美少女的混搭小窝";
lis[1].innerHTML = "经典清新简欧爱家 90平老房焕发新生";
lis[2].innerHTML = "新中式的酷色温情 66平撞色活泼家居";
lis[3].innerHTML = "瓷砖就像选好老婆 卫生间烟道的设计";
}else if(obj.value == "二手房"){
var lis = document.getElementsByTagName("li");
lis[0].innerHTML = "通州豪华3居260万 二环稀缺2居250w甩";
lis[1].innerHTML = "西3环通透2居290万 130万2居限量抢购";
lis[2].innerHTML = "黄城根小学学区仅260万 121平70万抛!";
lis[3].innerHTML = "独家别墅280万 苏州桥2居优惠价248万";
}
var bt0 = document.getElementById("bt0");
bt0.setAttribute("style", "border:1px #8B8878 solid;");
var bt1 = document.getElementById("bt1");
bt1.setAttribute("style", "border:1px #8B8878 solid;");
var bt2 = document.getElementById("bt2");
bt2.setAttribute("style", "border:1px #8B8878 solid;");
obj.setAttribute("style", "border:1px #8B8878 solid;border-top:2px #8B2500 solid;border-bottom:4px white solid");
}
</script>
</head>
<body>
<input type="button" id ="bt0" value="房产" onClick='selected(this)'/>
<input type="button" id ="bt1" value="家居" onClick='selected(this)'/>
<input type="button" id ="bt2" value="二手房" onClick='selected(this)'/>
<div id="div0">
<ul>
<li>275万购昌平邻铁三居 总价20万买一居</li>
<li>200万内购五环三居 140万安家东三环</li>
<li>北京首现零首付楼盘 53万购东5环50平</li>
<li>京楼盘直降5000 中信府 公园楼王现房</li>
</ul>
</div>
</body>
</html>