写这么多，就是为了能和效果图一模一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
width: 200px;
margin: 80px auto 0;
}
.nav .nav-list {
display: flex;
width: 100%;
}
.nav-list li {
width: 60px;
height: 40px;
text-align: center;
line-height: 40px;
border-top: 1px solid grey;
border-right: 1px solid grey;
border-left: 1px solid grey;
/* position: absolute; */
top: 36px;
margin-right: 5px;
z-index: 1000;
user-select: none;
cursor: pointer;
}
.nav-list li.show {
border-top: 3px solid saddlebrown;
border-bottom: 4px solid #fff;
}
.container {
width: 140%;
position: relative;
}
.container div {
width: 100%;
height: 150px;
position: absolute;
border-top: 3px solid saddlebrown;
border-right: 1px solid blue;
border-left: 1px solid blue;
border-bottom: 1px solid blue;
text-indent: 2em;
letter-spacing: 4px;
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<div class="nav">
<ul class="nav-list">
<li data-n="房产" class="show">房产</li>
<li data-n="家居">家居</li>
<li data-n="二手房">二手房</li>
</ul>
</div>
<div class="container">
<div data-n="房产">
275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房
</div>
<div data-n="家居">
40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居 瓷砖就像选好老婆 卫生间烟道的设计
</div>
<div data-n="二手房">
通州豪华3居260万 二环稀缺2居250w甩 西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛! 独家别墅280万 苏州桥2居优惠价248万
</div>
</div>
</div>
<script>
const oUl = document.querySelector(".nav-list ");
const aLi = document.querySelectorAll(".nav-list li");
const aDiv = document.querySelectorAll(".container div");
for (const i of aLi) {
i.style.left = i.offsetLeft + "px";
}
for (const j of aLi) {
j.style.position = "absolute";
}
aDiv[0].style.display = "block";
oUl.onclick = function (e) {
if (e.target.tagName.toLowerCase() === "li") {
for (let i = 0; i < aLi.length; i++) {
aLi[i].classList.remove("show");
}
e.target.classList.add("show");
let d = e.target.getAttribute("data-n");
console.log(d);
for (let i = 0; i < aLi.length; i++) {
aDiv[i].style.display = "none";
}
let n = document.querySelector(`div[data-n=${d}]`);
n.style.display = "block";
}
};
</script>
</body>
</html>
