JavaScript进阶

来源：互联网发布：excel应用数据透视表编辑：程序博客网时间：2024/05/16 19:30

编程挑战

现在利用之前我们学过的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.onload=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].onclick=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