<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
#divvv button {
height: 25px;
width: 80px;
background-color: aliceblue;
}
.waikuang {
/* margin-top: 0px; */
font-size: 14px;
border: 2px solid #0096e1;
border-top: 2px solid #be068a;
width: 300px;
height: 100px;
background-color: aliceblue;
}
</style>
<script type="text/javascript">
// 隐藏内容，文本内容;
window.onload = function () {
function yinsang() {
var ff = document.getElementById("fangchan");
ff.style.display = "none"
var jia = document.getElementById("jiaju");
jia.style.display = "none"
var jia = document.getElementById("ershoufang");
jia.style.display = "none"
}
yinsang();
// 随着鼠标更换颜色；
var sss = document.getElementsByTagName("button");
for (i = 0; i < sss.length; i++) {
sss[i].onmouseover = function () {
this.style.borderBottom = "none";
this.style.borderTop = " solid #be068a";
};
sss[i].onmouseout = function () {
this.style.border = "";
}
}
}
// JS实现选项卡切换
function xxx(id) {
if (id == 1) {
document.getElementById("waikuang").value = document.getElementById("fangchan").innerText;
}
else if (id == 2) {
document.getElementById("waikuang").value = document.getElementById("jiaju").innerText;
}
else if (id == 3) {
document.getElementById("waikuang").value = document.getElementById("ershoufang").innerText;
}
else {
document.getElementById("waikuang").value = "";
}
}
</script>
</head>
<body>
<div id="divvv">
<button onclick="xxx(1)">房产</button>
<button onclick="xxx(2)">家具</button>
<button onclick="xxx(3)">二手房</button>
<div class="waikuang">
<output id="waikuang">275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府 公园楼王现房</output>
</div>
</div>
<div id="fangchan" class="divvv">
<p>275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府 公园楼王现房</p>
</div>
<div id="jiaju" class="divvv">
<p>40平出租屋大改造 美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆 卫生间烟道的设计</p>
</div>
<div id="ershoufang" class="divvv">
<p>通州豪华3居260万 二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万 苏州桥2居优惠价248万</p>
</div>
</body>
</html>