选项卡切换

这个是慕课网javascript的大作业，鼠标移动到不同的选项卡就能显示对应的内容。

 

主要思路是将三个内容装在不同的div里面，然后通过onmouseover动作触发对应div的显示和隐藏（每次显示一个隐藏另外两个）。

 

 

HTML部分：

<ui>
    <li id="btn1" class="on" >
        房产
    </li>
    <li id="btn2" >
        家居
    </li>
    <li id="btn3" >
        二手房
    </li>
</ui>

<div id="word1" class="view">
    275万购昌平邻铁三居 总价20万买一居<br/>
    200万内购五环三居 140万安家东三环<br/>
    北京首现零首付楼盘 53万购东5环50平<br/>
    京楼盘直降5000 中信府 公园楼王现房
</div>
<div id="word2" class="hide">
    40平出租屋大改造 美少女的混搭小窝<br/>
    经典清新简欧爱家 90平老房焕发新生<br/>
    新中式的酷色温情 66平撞色活泼家居<br/>
    瓷砖就像选好老婆 卫生间烟道的设计
</div>
<div id="word3" class="hide">
    通州豪华3居260万 二环稀缺2居250w甩<br/>
    西3环通透2居290万 130万2居限量抢购<br/>
    黄城根小学学区仅260万 121平70万抛!<br/>
    独家别墅280万 苏州桥2居优惠价248万
</div> 

初始的状态设置成第一个div显示，另外两个div隐藏。

 

CSS部分：

    *{
         margin=0;
         padding=0;}
    ul{
        position:relative;
        z-index:;
    }
   li{
        width:50px;
        text-align:center;
        float:left;
        list-style:none;
        padding:5px 10px;
        margin:2px;
        margin-bottom:-2px;
        border:1px solid #ccc;
        border-bottom:0px;
        position:relative;
        z-index:9;
        
        }
    li.on{
        border-top:2px solid brown;
        border-bottom:2px solid #fff;
        
    }
    div{
        clear:both;
        border:1px solid #ccc;
        border-top:2px solid brown;
        margin:2px;
        padding:5px;
        width:222px;
        height:100px;
        font-size:10px;
        position:relative;
        z-index:1;
    }       
    .hide{
        display:none;
    }   
    .view{
        display:block;
    }

CSS中通过hide和view两个类名来控制显示和隐藏，等一下会在javascript部分用onmouseover来修改类名。另外鼠标的动作同时也触发li标签的样式变化，CSS里表示为类名on。另外学习了一个新的技巧：如果想要某个元素遮挡住另一个元素的效果，可以先设定position:relative;，然后设置一个z-index: 数值高的会遮挡住数值低的。这里用ul的下边框（白色）挡住了div的上边框，当触发onmouseover时，产生边框消失的效果。

 

Javascript：

    window.onload=function(){
        l1=document.getElementById("btn1");
        l2=document.getElementById("btn2");
        l3=document.getElementById("btn3");
        w1=document.getElementById("word1");
        w2=document.getElementById("word2");
        w3=document.getElementById("word3");
        l1.onmouseover=function v1(){
            w1.className="view";
            w2.className="hide";
            w3.className="hide";
            l1.className="on";
            l2.className="off";
            l3.className="off";
        }
        l2.onmouseover=function v2(){
            w1.className="hide";
            w2.className="view";
            w3.className="hide";
            l1.className="off";
            l2.className="on";
            l3.className="off";
        }
        l3.onmouseover=function v3(){
            w1.className="hide";
            w2.className="hide";
            w3.className="view";
            l1.className="off";
            l2.className="off";
            l3.className="on";
        }
    }

方法比较笨，如果有更多标签的话应该做一个循环遍历比较好。Javascript代码中首先找到节点，然后每次鼠标动作都会触发div内容和标签样式的变化。