寫這么多，就是為了能和效果圖一模一樣
<!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=$xzxwica]`);
??????????n.style.display?=?"block";
????????}
??????};
????</script>
??</body>
</html>
