zoukankan      html  css  js  c++  java
  • 选项卡教程(源代码)

    做网页无论实现的功能大或者小,都要先思考和分析一下思路,然后接着动手实现。

    下面我来讲讲实现选项卡的思路,学会了就可以用到很多网页里哦~~~

    一、HTML页面布局:

    1、选项卡一般选用无序列表:ul..li。

    2、选项卡的内容用div,这样在写css样式和js的时候可以很方便的把一块内容作为一个容器去控制。

    二、CSS样式制作:

    1、选项卡的样式设置。

    2、选项卡标题样式的设置。

    3、选项卡内容样式的设置。

    4、功能:开始的时候显示一个选项卡的内容,其他隐藏,鼠标划过才显示该选项卡下的内容。

    如图:

    三、JS实现选项卡切换

    1、先获取选项卡的标题和内容。

    2、选项卡有多个内容,需要用for循环来遍历,得出哪一个选项卡和哪一个内容匹配。

    3、通过改变DOM的CSS类的名称(className)来切换,当前点击的选项卡显示,其他的隐藏。

    四、现在开始实现功能:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
    /* CSS样式制作 */
    *{
    margin:0;
    padding:0;
    font:1em normal "microsoft yahei";
    }


    #tab{
    300px;
    height:150px;
    padding:5px;
    margin:20px;
    }


    ul{
    height:30px;//要实现的功能里鼠标经过选项卡时,底部边框变成白色,上边框变成#saddlebrown,此时给ul一个高度
    list-style:none;
    display:block;
    line-height:30px;
    border-bottom:2px saddlebrown solid;
    }


    li{
    60px;
    height:28px;//接着li的高度=ul的高度-ul下边框的高度。
    line-height:28px;//line-height的作用是让文字垂直居中。
    background:#fff;//给li的背景设成白色,也就是给下边框的缺口埋下伏笔。
    text-align:center;
    float:left;
    list-style:none;
    margin:0 3px;
    60px;
    text-align:center;
    cursor:pointer;
    border:1px solid #aaa;//这两句一定要放在后面,要不然显示不出来,具体原因我暂时还没有弄清楚。
    border-bottom:none;
    }
    .house{
    border-top:2px solid saddlebrown;//初始化设置第一个选项卡为当前,设置上边框。
    border-bottom:2px solid #fff;//设置下边框为none,此时就会出现下边框的缺口。
    }
    #tab div{
    height:120px;
    line-height:25px;
    border:1px solid #336699;
    border-top:none;
    padding:5px 20px 5px 5px;
    }
    .hide{
    display:none;//初始后面的选项卡内容为隐藏。
    }
    </style>
    <script type="text/javascript">

    // JS实现选项卡切换
    window.onload=function(){
    var tabs=document.getElementById("tab");//获取整一个div的id。
    tul=tabs.getElementsByTagName("ul")[0];//获取ul。
    var tli = tul.getElementsByTagName("li");//获取li。
    var divs = tabs.getElementsByTagName("div"); //获取选项卡内容的div。
    for(var i = 0;i<tli.length;i++){
    tli[i].index = i;//index为li数组的下标
    tli[i].onmouseover = function(){//鼠标经过事件
    for(var i = 0;i<tli.length;i++){
    tli[i].className = "";//当li的类名为空时,将选项卡的内容div的类名设为hide
    divs[i].className = "hide"
    }
    this.className = "house";//同时当前的选项卡和内容样式设为初始时的样式
    divs[this.index].className = "show";
    }

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

    </body>
    </html>

    该来的总会来,只要踏踏实实地做好现在的事情就可以了~~~

  • 相关阅读:
    Aibabelx-shop 大型微服务架构系列实战之技术选型
    龙应台:中年人的迷惘,比年轻人的更可怕!
    劝进篇
    高并发与多线程的关系、区别、高并发的技术方案
    redis常用知识
    Lucene全文检索入门使用
    大数据综合案例-网站日志分析
    python数据类型
    Tornado
    flask-sqlalchemy用法详解
  • 原文地址:https://www.cnblogs.com/wuxn/p/4755563.html
Copyright © 2011-2022 走看看