为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/JavaScript进阶篇

作业代码.

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        span{

            cursor:pointer;

        }

        

        #c{

            border: 1px solid #ccc;

            border-top: 2px solid #ad5d34;

            width: 350px;

            height: 150px;

        }

        

        li{

            line-height:28px;

        }

        

        .c{

            border: 1px solid #ccc;

            display:inline-block;

            width: 70px;

            height: 30px;

            border-bottom: 2px solid #fff;

            border-top: 2px solid #ad5d34;

            margin-left:5px;

            text-align: center;

            line-height: 2em;

            margin-bottom: -2px;

        }

        

        .unc{

            border: 1px solid #ccc;

            display:inline-block;

            width: 70px;

            height: 30px;

            border-bottom: 2px solid #ad5d34;

            margin-left:5px;

            text-align: center;

            line-height: 2em;

            margin-bottom: -2px;

        }

        

    </style>

</head>

<body>

    <div id="a" >

        <span id="b1" class="c" onclick="f1(1)">房产</span>

        <span id="b2" class="c" onclick="f1(2)">家居</span>

        <span id="b3" class="c" onclick="f1(3)">二手房</span>

    </div>

    <div id="c">

        <ol id="d1">

             <li>275万购昌平邻铁三居 总价20万买一居</li>

             <li>200万内购五环三居 140万安家东三环</li>

             <li>北京首现零首付楼盘 53万购东5环50平</li>

             <li>京楼盘直降5000 中信府 公园楼王现房</li>

        </ol>

        <ol id="d2">

             <li>40平出租屋大改造 美少女的混搭小窝</li>

             <li>经典清新简欧爱家 90平老房焕发新生</li>

             <li>新中式的酷色温情 66平撞色活泼家居</li>

             <li>瓷砖就像选好老婆 卫生间烟道的设计</li>

        </ol>

        <ol id="d3">

            <li>通州豪华3居260万 二环稀缺2居250w甩</li>

            <li>西3环通透2居290万 130万2居限量抢购</li>

            <li>黄城根小学学区仅260万 121平70万抛!</li>

            <li>独家别墅280万 苏州桥2居优惠价241万</li>

        </ol>

    </div>

    <script>

        f1(1);

        function f1(aaa){

            var b1=document.getElementById("b1");

            var b2=document.getElementById("b2");

            var b3=document.getElementById("b3");

            var d1=document.getElementById("d1");

            var d2=document.getElementById("d2");

            var d3=document.getElementById("d3");

            

            switch(aaa){

                case 1:

                    b1.className = "c";

                    b2.className = "unc";

                    b3.className = "unc";

                    d1.style.display="block";

                    d2.style.display="none";

                    d3.style.display="none";

                    break;

                case 2:

                    b1.className = "unc";

                    b2.className = "c";

                    b3.className = "unc";

                    d1.style.display="none";

                    d2.style.display="block";

                    d3.style.display="none";

                    break;

                case 3:

                    b1.className = "unc";

                    b2.className = "unc";

                    b3.className = "c";

                    d1.style.display="none";

                    d2.style.display="none";

                    d3.style.display="block";

                    break;

            }

        }

    </script>

</body>

</html>


慕粉5343734

2021-01-16

源自：JavaScript进阶篇  10-1

关注问题 我要回答
779
操作
收起

正在回答

1 回答

慕设计0012841
2021-01-20

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>实践题 - 选项卡</title>

    <style type="text/css">

     /* CSS样式制作 */  

    * {

    margin: 0px;

padding: 0px;

font-family: 'Microsoft YaHei','SimSun';

line-height: 30px;

    }

    

    a {

     color: #000;

     text-decoration: none;

    }

    

    a:hover {

     color: blue;

    }

    

    #tabList {

     width: 350px;

     height: 180px;

     margin: 10px auto;

    }

    

    #tabList div {

     border: 1px solid #000;

     border-top: none;

     padding: 5px 7px;

    }

    

    .ul_horizontal {

     border-bottom: 2px solid #990000;

     height: 32px;

    }

    

    .ul_horizontal li {

     display: inline-block;

     width: 70px;

     text-align: center;

     border: 1px solid #999;

     border-bottom: none;

     margin-left: 5px;

    }

    

    .ul_horizontal li.active {

     border-top: 2px solid #990000;

     border-bottom: 2px solid #fff;

    }

    

    .ul_horizontal li:hover {

     cursor: pointer;

    }

    

    .hide {

     display: none;

    }

    

    .show {

     display: block;

    }

        </style>

    

    <script type="text/javascript">

         

    // JS实现选项卡切换

    window.onload = function() {

        var tabs = document.getElementById("tabList");

        var li = tabs.getElementsByTagName("li");

        var div = tabs.getElementsByTagName("div");

        for (var i = 0; i < li.length; i++) {

            li[i].index = i;

            li[i].onclick = function() {

                for (var j = 0; j < li.length; j++) {

                    li[j].className = "";

                    div[j].className = "hide";

                }

                this.className = "active";

                div[this.index].className = "show";

            }

        }

    }

    </script>

 

</head>

<body>

<!-- HTML页面布局 -->

<div id="tabList">

    <ul class="ul_horizontal">

        <li class="active">房产</li><li>家居</li><li>二手房</li>

    </ul>

    <div>

        <a href="javascript:void(0)">275万购昌平邻铁三居 总价20万买一居</a><br />

        <a href="javascript:void(0)">200万内购五环三居 140万安家东三环</a><br />

        <a href="javascript:void(0)">北京首现零首付楼盘 53万购东5环50平</a><br />

        <a href="javascript:void(0)">京楼盘直降5000 中信府 公园楼王现房</a><br />

    </div>

    <div class="hide">

        <a href="javascript:void(0)">40平出租屋大改造 美少女的混搭小窝</a><br />

        <a href="javascript:void(0)">经典清新简欧爱家 90平老房焕发新生</a><br />

        <a href="javascript:void(0)">新中式的酷色温情 66平撞色活泼家居</a><br />

        <a href="javascript:void(0)">瓷砖就像选好老婆 卫生间烟道的设计</a><br />

    </div>

    <div class="hide">

        <a href="javascript:void(0)">通州豪华3居260万 二环稀缺2居250w甩</a><br />

        <a href="javascript:void(0)">西3环通透2居290万 130万2居限量抢购</a><br />

        <a href="javascript:void(0)">黄城根小学学区仅260万 121平70万抛!</a><br />

        <a href="javascript:void(0)">独家别墅280万 苏州桥2居优惠价248万</a><br />

    </div>

    

</div>


 

</body>

</html>


0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       468280    人
  • 解答问题       21892    个

本课程从如何插入JS代码开始，带您进入网页动态交互世界

进入课程

本课相似问答

1 回答作业实现代码

1 回答求解，怎么提交代码？（作业的形式）

4 回答交作业。。。。

5 回答作业不懂。。。。

2 回答交作业啦！！
搜索更多本课相关问答

作业代码.

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信