zoukankan      html  css  js  c++  java
  • 选项卡切换

    这个是慕课网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内容和标签样式的变化。

  • 相关阅读:
    Balanced Binary Tree
    Swap Nodes in Pairs
    Reverse Nodes in k-Group
    Reverse Linked List II
    Remove Nth Node From End of List
    Remove Duplicates from Sorted List II
    Remove Duplicates from Sorted List
    Partition List
    Merge Two Sorted Lists
    【Yii2.0】1.2 Apache检查配置文件语法
  • 原文地址:https://www.cnblogs.com/aaaaabk/p/4905415.html
Copyright © 2011-2022 走看看