js编程（选项卡）

最新推荐文章于 2023-07-21 22:38:10 发布

_米粒儿_

最新推荐文章于 2023-07-21 22:38:10 发布

阅读量617

点赞数 1

分类专栏： Javascript 文章标签：编程 javascript 选项卡

本文链接：https://blog.csdn.net/yiren_99/article/details/47844397

版权

Javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

编程练习

现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。

效果图:

文字素材:

房产：

275万购昌平邻铁三居总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府公园楼王现房

家居:

40平出租屋大改造美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆卫生间烟道的设计

二手房：

通州豪华3居260万二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万苏州桥2居优惠价248万

任务

大家先思考和分析实现思路，然后在动手实现

一、HTML页面布局

提示:
选项卡标题使用ul..li
选项卡内容使用div

二、CSS样式制作

提示:
整个选项卡的样式设置
选项卡标题的样式设置
选项卡内容的样式设置
一开始只显示一个选项卡内容，其它选项卡内容隐藏。

三、JS实现选项卡切换

提示:
获取选项卡标题和选项卡内容
选项卡内容多个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配
通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */  
*{padding:0px;margin:0px;font:16px normal "黑体";}
#tables{
    padding:20px;
    width:340px;
    height:200px;
    border:10px solid;
    margin:20px;
}
#tables ul{
    list-style:none;
    line-height:30px;
    border-bottom:2px solid saddlebrown;
    width:300px;
    height:30px;
    display:block;
    
}
#tables ul li{
    list-style:none;
    width:60px;
    height:30px;
    line-height:30px;
    text-align:center;
    margin:0 3px;
    float:left;
    background:#fff;
    border:1px solid #aaa;
    border-bottom:none;
    display:inline-block;
    cursor:pointer;
}
#tables ul li.on{
    border-top:2px solid saddlebrown;
    border-bottom:2px solid #fff;
}
#tables div{
    height:148px;
    width:288px;
    border:1px solid #336699;
    border-top:none;
    padding:5px;
}
  .hide{display:none;}
       
    </style>
    <script type="text/javascript">
         
    // JS实现选项卡切换
    window.οnlοad=function(){
        var tabs=document.getElementById("tables");
        var ul=tabs.getElementsByTagName("ul")[0];
        var lis=ul.getElementsByTagName("li");
        var divs=tabs.getElementsByTagName("div");
        for(var i=0;i<lis.length;i++){
            lis[i].index=i;
            lis[i].οnclick=function(){
                for(var j=0;j<lis.length;j++){
                    lis[j].className="";
                    divs[j].className="hide";
                }
                this.className="on";
                divs[this.index].className="";
            }
        };
    }
    
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
<div id="tables">
<ul><li class="on">房产</li><li>家居</li><li>二手房</li></ul>
<div>
    <p>275万购昌平邻铁三居 总价20万买一居</p>
    <p>200万内购五环三居 140万安家东三环</p>
    <p>北京首现零首付楼盘 53万购东5环50平</p>
    <p>京楼盘直降5000 中信府 公园楼王现房</p>
</div>
<div class="hide">
    <p>40平出租屋大改造 美少女的混搭小窝</p>
    <p>经典清新简欧爱家 90平老房焕发新生</p>
    <p>新中式的酷色温情 66平撞色活泼家居</p>
    <p>瓷砖就像选好老婆 卫生间烟道的设计</p>
</div>
<div class="hide">
    <p>黄城根小学学区仅260万 121平70万抛!</p>
    <p>西3环通透2居290万 130万2居限量抢购</p>
    <p>黄城根小学学区仅260万 121平70万抛!</p>
    <p>独家别墅280万 苏州桥2居优惠价248万</p>
</div>
 </div>
</body>
</html>

_米粒儿_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js编程（选项卡）

编程练习现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。效果图:文字素材:房产： 275万购昌平邻铁三居总价20万买一居 200万内购五环三居 140万安家东三环北京首现零首付楼盘 53万购东5环50平京楼盘直降5000 中信府公园楼王现房家居: 40平出租屋大改造美少女的混搭小窝
复制链接

扫一扫