JavaScript进阶

最新推荐文章于 2024-04-24 11:52:28 发布

林次次

最新推荐文章于 2024-04-24 11:52:28 发布

阅读量465

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lin14543/article/details/52205306

版权

JavaScript 专栏收录该内容

11 篇文章 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样式制作 */  
       *{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
       ul{list-style-type:none;}
       a{text-decoration:none;}
       
       #tab-list{width:275px;height:190px;margin:20px auto;}
       
       #ul1{border-bottom:2px solid #8b4513;height:32px;}
       #ul1 li{display:inline-block;width:60px;line-height:30px;text-align:center;border:1px solid #999;border-bottom:none;margin-left:5px;}
       #ul1 li:hover{cursor:pointer;}
       #ul1 li.active{border-top:2px solid #8b4513;border-bottom:2px solid #FFFFFF;}
       
       #tab-list div{border:1px solid #7396B8;border-top:none;}
       #tab-list div li{height:30px;line-height:30px;text-indent:8px;}
       
       .show{display:block;}.hide{display:none;}
    </style>
    <script type="text/javascript">
        window.οnlοad=function() {
            var ul1=document.getElementById("ul1");
            var ali=ul1.getElementsByTagName("li");
            var odiv=document.getElementById("tab-list");
            var adiv=odiv.getElementsByTagName("div");
            for(var i=0;i<ali.length; i++){
                ali[i].index=i;
                ali[i].οnclick=function() {
                    for(var k=0;k<ali.length;k++){
                        ali[k].className="";
                    }
                    this.className="active";
                    for(var j=0;j<adiv.length;j++){
                        adiv[j].className="hide";
                    }
                    adiv[this.index].className="show";
                }
            }
        }
    
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab-list">
    <ul id="ul1">
        <li class="active">房产</li><li>家居</li><li>二手房</li>
    </ul>
    <div>
        <ul>
            <li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
            <li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
            <li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
            <li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
        </ul>
    </div>    
    <div class="hide">
        <ul>
            <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
            <li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>
            <li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
            <li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
        </ul>
    </div>    
    <div class="hide">
        <ul>
            <li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
            <li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
            <li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>
            <li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
        </ul>
    </div>
</div>
</body>
</html>

林次次

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript进阶

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

扫一扫

专栏目录