问答详情
源自：10-1 编程挑战

最通俗易懂的，欢迎各位吐槽

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

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

    <style type="text/css">

     /* CSS样式制作 */ 

    *{

        font:12px/1.5em 微软雅黑,sans-serif;

        padding:0;

        margin:0;

    }

    #tabs{

        width:300px;

        height:170px;

        padding:5px;

        margin:18px;

    }

    #table{

        height:30px;

        display:block;

        list-style:none;//清除圆点,没有好像也可以；    }

    #table li{

        cursor:pointer;//修改指针为手指形状；

        float:left;

        text-align:center;

        line-height:28px;

        width:60px;

        height:28px;

        margin:0,0,0,3px;

        display:inline-block;

        background:#fff;

    }

    .li1{

        border:1px solid #ccc;

        border-top:2px solid red;

        border-bottom:2px solid #fff;

    }

    .li2{

        border:1px solid #ccc;

        border-bottom:0px;    }

    #tabs div{

        border:1px solid blue;

        border-top:2px solid red;

        background:#fff;

        height:120px;

        padding:10px;

        line-height:25px;

    }

    .box1{

        display:block;

    }

    .box2{

        display:none;

    }

    </style>

    <script type="text/javascript">

     function aaa(){

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

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

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

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

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

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

      a.className="box1";

      b.className="box2";

      c.className="box2";

      e.className="li1";

      f.className="li2";

      g.className="li2";

  }

  function abb(){

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

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

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

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

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

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

      a.className="box2";

      b.className="box1";

      c.className="box2";

      e.className="li2";

      f.className="li1";

      g.className="li2";

  }

  function acc(){

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

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

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

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

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

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

      e.className="li2";

      f.className="li2";

      g.className="li1";

      a.className="box2";

      b.className="box2";

      c.className="box1";

  }

  

    </script>

 

</head>

<body>

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

<div id="tabs">

<ul id="table">

<li class="li1" id="e" onmouseover="aaa()">房产</li>

<li class="li2" id="f" onmouseover="abb()">家居</li>

<li class="li2" id="g" onmouseover="acc()" >二手房</li>

</ul>  <div class="box1" id="a">

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

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

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

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

  </div>

  <div class="box2" id="b">

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

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

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

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

  </div>

  <div class="box2" id="c">

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

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

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

    独家别墅280万 苏州桥2居优惠价248万<br>

  </div>

</div>

</body>

</html>

  1. 虽然繁琐，可以实现题目

提问者：慕先生3265212 2019-10-13 13:31

个回答

  • weixin_慕函数0204101
    2020-03-24 16:59:14

    哈哈，我最开始写的也是和你一模一样的逻辑，   通俗易懂，简单粗暴 ?

    0
  • kaluroro
    2020-02-20 11:49:46

    稍稍改进了一下：

     

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>实践题 - 选项卡</title>
        <style type="text/css">
         /* CSS样式制作 */
        *{
            font:12px/1.5em 微软雅黑,sans-serif;
            padding:0;
            margin:0;
        }

        #tabs{
            width:300px;
            height:170px;
            padding:5px;
            margin:18px;
        }

        #table{
            height:30px;
            display:block;
            list-style:none;//清除圆点,没有好像也可以；   
        }

        #table li{
            cursor:pointer;//修改指针为手指形状；
            float:left;
            text-align:center;
            line-height:28px;
            width:60px;
            height:29px;
            margin:0,0,0,3px;
            display:inline-block;
            background:#fff;
        }

        .li1{
            border:1px solid #ccc;
            border-top:2px solid red;
            border-bottom:2px solid #fff;
        }

        .li2{
            border:1px solid #ccc;
            border-bottom:0px;
        }

        #tabs div{
            border:1px solid blue;
            border-top:2px solid red;
            background:#fff;
            height:120px;
            padding:10px;
            line-height:25px;
        }

        .box1{
            display:block;
        }

        .box2{
            display:none;
        }

        </style>
       
       
        <script type="text/javascript">
       
        function aaa(){
            var a=document.getElementById("a");
            var b=document.getElementById("b");
            var c=document.getElementById("c");
            var e=document.getElementById("e");
            var f=document.getElementById("f");
            var g=document.getElementById("g");

            a.className="box1";
            b.className="box2";
            c.className="box2";
            e.className="li1";
            f.className="li2";
            g.className="li2";
        }

        function abb(){
            var a=document.getElementById("a");
            var b=document.getElementById("b");
            var c=document.getElementById("c");
            var e=document.getElementById("e");
            var f=document.getElementById("f");
            var g=document.getElementById("g");
         
            a.className="box2";
            b.className="box1";
            c.className="box2";
            e.className="li2";
            f.className="li1";
            g.className="li2";
        }

        function acc(){

            var a=document.getElementById("a");
            var b=document.getElementById("b");
            var c=document.getElementById("c");
            var e=document.getElementById("e");
            var f=document.getElementById("f");
            var g=document.getElementById("g");

            e.className="li2";
            f.className="li2";
            g.className="li1";
            a.className="box2";
            b.className="box2";
            c.className="box1";
        }
        </script>
       
    </head>


    <body>

    <!-- HTML页面布局 -->
    <div id="tabs">
        <ul id="table">
            <li class="li1" id="e" onclick="aaa()">房产</li>
            <li class="li2" id="f" onclick="abb()">家居</li>
            <li class="li2" id="g" onclick="acc()" >二手房</li>
        </ul> 
       
        <div class="box1" id="a">

            <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="box2" id="b">
       
            <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="box2" id="c">
       
            <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
  • kaluroro
    2020-02-20 11:37:22

    厉害！???

    0
  • weixin_慕标5386327
    2019-10-19 18:19:05

    你这太复杂了，太乱了


    0