js选项卡切换效果

最新推荐文章于 2022-08-27 16:01:12 发布

Olivia0319

最新推荐文章于 2022-08-27 16:01:12 发布

阅读量1.4k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Olivia0319/article/details/82532811

版权

在慕课网学习javascript的过程中，做的一道练习题，在此记录一下。贴上慕课网课程的地址：编程挑战。利用css和javascript的知识来实现选项卡切换的效果。效果图如下所示：
最终效果图
步骤：

HTML页面布局
css样式制作
js实现选项卡切换

代码如下：

html

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

style.css

*{
    padding:0px;
    margin:0px;
    font:12px normal "microsoft yahei";
}
#main{
    width:300px;    
    height:150px;
    padding:5px;
    margin:20px;
}
#main ul{
    height:30px;
    line-height:30px;
    border-bottom:2px solid saddlebrown ;
}
#main ul li{
    display:inline-block;
    list-style: none;
    cursor:pointer;     
    float:left;
    background:#fff;
    width:60px;
    height:28px;
    line-height:28px;
    text-align: center;
    margin:0px 3px;
    border:1px solid #aaa;
    border-bottom:none;     
}
#main ul li.current{
    border-top:2px solid saddlebrown;
    border-bottom:2px solid #fff;
}
#main div{
    height:120px;
    line-height:25px;
    border:1px solid #336699;
    border-top:none;padding:5px;
}
.hide{
    display:none;
}

script.js

window.onload=function(){
    var main = document.getElementById("main");
    var oul = main.getElementsByTagName("ul")[0];
    var lists = oul.getElementsByTagName("li");
    var divs= main.getElementsByTagName("div");
    for(var i=0;i<lists.length;i++){
        lists[i].index = i;
        lists[i].onclick=function(){
            for(var n=0;n<divs.length;n++){
                lists[n].className = "";
                divs[n].className = "hide";
            }
            this.className = "current";
            divs[this.index].className = "";
        }
    }
}