JavaScript进阶
2016-08-14 17:35
12 查看
编程挑战
现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果。效果图:
![](http://img.mukewang.com/53bd0e9e000163d203390200.jpg)
文字素材:
房产:
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>
相关文章推荐
- JavaScript 精粹 基础 进阶(1)数据类型
- Javascript 进阶 封装
- JavaScript进阶学习 CodeWars 日记 求两个字符串的混合
- JavaScript进阶教程(第三课第二部分)第1/2页
- javaScript进阶-事件委派
- (javascript进阶必备) 运算符“||”和“&&”的巧妙用法
- JavaScript基础进阶之数组方法总结
- JavaScript 开发进阶:理解 JavaScript 作用域和作用域链
- Javascript进阶(一)
- JavaScript 精粹 基础 进阶(6)函数和作用域(函数、this)
- JavaScript完美运动框架进阶之旅
- 全面了解JavaScript对象进阶
- JavaScript进阶 - 第5章 小程序,大作用(函数)
- 闭包 进阶 javascript
- JavaScript进阶学习笔记
- JAVASCRIPT进阶书籍介绍
- JavaScript 开发进阶:理解 JavaScript 作用域和作用域链
- JavaScript进阶:谈谈对闭包的理解
- JavaScript进阶【二】JavaScript 严格模式(use strict)的使用
- Javascript事件处理进阶