                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

编写过程中从其他同学的代码中得到灵感，现在po出来也阔以给大家看看

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        /* CSS样式制作 */
 a{
            text-decoration:none;
            color:#000;
            font-size:12px;
        }
        a:focus{outline:none;}
        ul{
            height:30px;
            width:300px;
            margin:0;
            padding:10px 0px 0px 10px;
        }
        li{
            display:block;
            height:30px;
            width:60px;
            text-align:center;
            list-style:none;
            float:left;
            border:#B1B5B5 solid 1px;
            margin:0px 5px;
            border-bottom:#8B4513 solid 2px;
            background-color: #ffffff;
        }
        #card{
            height:200px;
            width:400px;
        }
        #content0,#content1,#content2{
            border:#4D7BA6 solid 1px;
            height:150px;
            width:300px;
            margin-left:10px;
            border-top-color:#8B4513;
            border-top-width: 2px;
        }
        span{
            display: block;
            font-size:14px;
            margin: 10px 5px;
        }
    </style>
    <script type="text/javascript">

    // JS实现选项卡切换
 function lili(){
        var b=document.getElementsByName("article");
        for(var j=0;j<b.length;j++){
            b[j].style.borderTop="#B1B5B5 solid 1px";
            b[j].style.borderBottom="#8B4513 solid 2px";
           }
        }

        function changeLi(i){
            var card1=document.getElementById("content0");
            var card2=document.getElementById("content1");
            var card3=document.getElementById("content2");
            var a=i.tabIndex;
            var li=i.parentNode;
           //document.write(a);
 if(a=="0"){
            card1.style.display="block";
            card2.style.display="none";
            card3.style.display="none";
        }else if(a=="1"){
            card1.style.display="none";
            card2.style.display="block";
            card3.style.display="none";
        }else if(a=="2"){
            card1.style.display="none";
            card2.style.display="none";
            card3.style.display="block";
        }
        li.style.borderTop="#8B4513 solid 2px";
        li.style.borderBottom="#ffffff solid 2px";
        }

    </script>

</head>
<body>
<!-- HTML页面布局 -->
<div id="card">
    <div id="menu">
        <ul class="UL">
            <li class="LI" name="article"><a style="cursor:pointer" onclick="lili();changeLi(this);" tabindex="0">房产</a></li>
            <li class="LI" name="article"><a style="cursor:pointer" onclick="lili();changeLi(this);" tabindex="1">家居</a></li>
            <li class="LI" name="article"><a style="cursor:pointer" onclick="lili();changeLi(this);" tabindex="2">二手房</a></li>
        </ul>
    </div>
    <div id="content0" style="display: block" >
        <span><a href="#">275万购昌平邻铁三居 总价20万买一居</a></span>
        <span><a href="#"> 200万内购五环三居 140万安家东三环</a></span>
        <span><a href="#"> 北京首现零首付楼盘 53万购东5环50平</a></span>
        <span><a href="#">京楼盘直降5000 中信府 公园楼王现房</a></span>
    </div>
    <div id="content1" style="display: none">
        <span><a href="#">40平出租屋大改造 美少女的混搭小窝</a></span>
        <span><a href="#"> 经典清新简欧爱家 90平老房焕发新生</a></span>
        <span><a href="#">新中式的酷色温情 66平撞色活泼家居</a></span>
        <span><a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a></span>
    </div>
    <div id="content2" style="display: none">
        <span><a href="#">通州豪华3居260万 二环稀缺2居250w甩</a></span>
        <span><a href="#"> 西3环通透2居290万 130万2居限量抢购</a></span>
        <span><a href="#"> 黄城根小学学区仅260万 121平70万抛!</a></span>
        <span><a href="#">独家别墅280万 苏州桥2居优惠价248万</a></span>
    </div>
</div>
</body>
</html>

自己的能力暂时有限，有什么建议欢迎提出来交流哦~