虽然用的代码不太高级，但是效果还是出来了，思路很简单的-慕课网

虽然用的代码不太高级，但是效果还是出来了，思路很简单的

来源：10-1 编程挑战

顾先生r

2021-01-10 18:12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       #ff,#jj,#er{
            border:1px solid black;
 border-bottom:2px solid white;
 width:70px;
 height:30px;
 margin-left:20px;
 text-align:center;
 line-height:30px;
 margin-top:20px;
 background-color: white;
 display:inline-block;

 }
       #nn{
           width:340px;
 height:120px;
 border:1px solid cornflowerblue;
 border-top:2px solid #cd3d34;
 text-align: center ;
 padding-top:20px;
 line-height:25px;
 margin-left:15px;
 margin-top:-2px;
 }
        #n2,#n3{
            display: none;
 }
        #ff{
            border-top:2px solid #cd3d34;

 }
        #jj,#er{
            border-bottom:2px solid #cd3d34;
 }

    </style>
</head>
<body>
<div id="cc" >
    <span id="ff" onclick="f1()">房产</span>
    <span id="jj">家居</span>
    <span id="er">二手房</span>
</div>
<div id="nn">
<div id="n1">
 275万购昌平邻铁三居 总价20万买一居<br>
 200万内购五环三居 140万安家东三环<br>
 北京首现零首付楼盘 53万购东5环50平<br>
 京楼盘直降5000 中信府 公园楼王现房
</div>
<div id="n2">
 40平出租屋大改造 美少女的混搭小窝<br>
 经典清新简欧爱家 90平老房焕发新生<br>
 新中式的酷色温情 66平撞色活泼家居<br>
 瓷砖就像选好老婆 卫生间烟道的设计
</div>
<div id="n3">
 通州豪华3居260万 二环稀缺2居250w甩<br>
 西3环通透2居290万 130万2居限量抢购<br>
 黄城根小学学区仅260万 121平70万抛!<br>
 独家别墅280万 苏州桥2居优惠价248万
</div>
</div>
<script>
 var f=document.getElementById("ff");
 var j=document.getElementById("jj");
 var e=document.getElementById("er");
 var n1=document.getElementById("n1");
 var n2=document.getElementById("n2");
 var n3=document.getElementById("n3");
 function f1() {
        f.style.borderTop="2px solid #cd3d34";
 j.style.borderTop="1px solid black";
 e.style.borderTop="1px solid black";
 f.style.borderBottom="2px solid white";
 j.style.borderBottom="2px solid #cd3d34";
 e.style.borderBottom="2px solid #cd3d34";
 n1.style.display="block";
 n2.style.display="none";
 n3.style.display="none";
 }
    j.onclick=function () {
        j.style.borderTop="2px solid #cd3d34";
 f.style.borderTop="1px solid black";
 e.style.borderTop="1px solid black";
 j.style.borderBottom="2px solid white";
 f.style.borderBottom="2px solid #cd3d34";
 e.style.borderBottom="2px solid #cd3d34";
 n2.style.display="block";
 n1.style.display="none";
 n3.style.display="none";
 }
    e.onclick=function () {
        e.style.borderTop="2px solid #cd3d34";
 f.style.borderTop="1px solid black";
 j.style.borderTop="1px solid black";
 e.style.borderBottom="2px solid white";
 f.style.borderBottom="2px solid #cd3d34";
 j.style.borderBottom="2px solid #cd3d34";
 n3.style.display="block";
 n2.style.display="none";
 n1.style.display="none";
 }
</script>
</body>

写回答关注