JavaScript tab页
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
.tab-div {
width: 400px;
position: relative; /*作为选项卡内容的定位*/
}
ul {
list-style: none;
}
.tab {
width: 400px;
overflow: hidden;
margin: ;
padding: ; position: relative;
z-index: ;
}
.tab li{
float: left;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #DDD;
border-bottom: ;
margin-left: 10px;
background: #fff;
cursor: pointer;
}
.tab-content {
width: 350px;
/*position: absolute;*/
border: 1px solid #DDD;
border-top: 3px solid #e4393c; text-align: center; position: absolute;
top: 31px;
left: ;
}
.tab-content ul {
margin: ;
padding: 10px;
}
.tab-content li {
padding: 10px;
}
.tab-content li a {
color: #;
text-decoration: none;
}
.tab-content li a:hover {
color: #e4393c;
text-decoration: underline;
}
.tab .tab-active {
border-top: 3px solid #e4393c;
border-bottom: 3px solid #fff;
}
.tab-content-show {
display: block;
}
.tab-content-hide {
display: none;
}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function() {
var tabList = document.getElementById("tab-list");
var aLis = tabList.getElementsByTagName("li");
var tDiv = document.getElementById("tDiv");
var contents = tDiv.getElementsByTagName("div"); for(var i = ; i < aLis.length; i++) {
aLis[i].index = i;
aLis[i].onclick = function() {
for(var j = ; j < aLis.length; j++) {
aLis[j].className = '';
}
this.className = "tab-active"; for(var j = ; j < contents.length; j++) {
contents[j].className = "tab-content tab-content-hide";
}
contents[this.index].className = "tab-content tab-content-show";
};
}
}; </script> </head>
<body>
<!-- HTML页面布局 -->
<div id="tDiv" class="tab-div">
<ul id="tab-list" class="tab">
<li class="tab-active">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div class="tab-content tab-content-show">
<ul>
<li><a href="#">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="#">200万内购五环三居 140万安家东三环</a></li>
<li><a href="#">北京首现零首付楼盘 53万购东5环50平</a></li>
<li><a href="#">京楼盘直降5000 中信府 公园楼王现房</a></li>
</ul>
</div>
<div class="tab-content tab-content-hide">
<ul>
<li><a href="#">40平出租屋大改造 美少女的混搭小窝</a></li>
<li><a href="#">经典清新简欧爱家 90平老房焕发新生</a></li>
<li><a href="#">新中式的酷色温情 66平撞色活泼家居</a></li>
<li><a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
</ul>
</div>
<div class="tab-content tab-content-hide">
<ul>
<li><a href="#">通州豪华3居260万 二环稀缺2居250w甩</a></li>
<li><a href="#">西3环通透2居290万 130万2居限量抢购</a></li>
<li><a href="#">黄城根小学学区仅260万 121平70万抛!</a></li>
<li><a href="#">独家别墅280万 苏州桥2居优惠价248万</a></li>
</ul>
</div>
</div>
</body>
</html>
JavaScript tab页的更多相关文章
- jquery实现tab页切换显示div
1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...
- 自制tab页
没事自己弄着玩,写了个tab页.不要当真.想看就看看.希望相互学习. 效果预览:html源码: <!DOCTYPE html> <html lang="en"&g ...
- ECSHOP:首页实现显示子分类商品,并实现点击Tab页切换分类商品
例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始: 1. 打开调试开关 文件地址:include/cls_template.php 找到 : functi ...
- 跨浏览器tab页的通信解决方案尝试
目标 当前页面需要与当前浏览器已打开的的某个tab页通信,完成某些交互.其中,与当前页面待通信的tab页可以是与当前页面同域(相同的协议.域名和端口),也可以是跨域的. 要实现这个特殊的功能,单单使用 ...
- JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化
前言:之前发表过一篇 JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...
- tab页切换
做了一个tab页切换.点击不同tab,显示对应的内容信息 如图 =================HTML===================== <!doctype html public ...
- H+ 编辑tab页 保存后 刷新列表tab页 并关闭自已。tabA页调用tabB页的方法
//注:在contabs.js文件中 $(function () { }); 方法外 加入 //注: data-name="' + menuName + '" 这句是加入的自定义属 ...
- 切换tab页时,tab页中的echart变形问题
本文为博主原创,未经允许,不得转载: 在两个tab页中,分别展现了两个echart图表,同样的格式与写法,但只有在默认选中的tab页中的图表显示的是正常的, 但进入另一个tab页中时,图表则产生了变形 ...
- 值得分享的Bootstrap Ace模板实现菜单和Tab页效果(转)
Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...
随机推荐
- POJ 1088: 滑雪(经典 DP+记忆化搜索)
滑雪 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 74996 Accepted: 27818 Description ...
- 大话设计模式C++实现-第15章-抽象工厂模式
一.UML图 二.概念 抽象方法模式(Abstract Factory):提供一个创建一系列相关或互相依赖对象的接口,而无需指定他们详细的类. 三.包括的角色 (1)抽象工厂 (2)详细工厂:包含详细 ...
- HDU 5303 Delicious Apples(贪心 + 背包 2015多校啊)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5303 Problem Description There are n apple trees plan ...
- js实现小时钟,js中Date对象的使用?
介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...
- thinkphp5内置标签
thinkphp5内置标签 知道内置标签怎么用,查手册的时候好查 却功能的时候在里面找着来用 内置标签一览 内置标签 变量输出使用普通标签就足够了,但是要完成其他的控制.循环和判断功能,就需要借助模板 ...
- Redis封装之Hash
RedisHashService: /// <summary> /// Hash:类似dictionary,通过索引快速定位到指定元素的,耗时均等,跟string的区别在于不用反序列化,直 ...
- 如何快速复制Windows警告提示消息对话框内容
凡是使用过计算机的朋友,都遇到过系统发出的警告提示消息对话框,如图所示. 哇!好长的一串英文错误警告,这要手写到什么时候呢?不!现在不用这么麻烦了. 你只要鼠标选中这个提示框Ctrl+C,然后打开你的 ...
- Json 序列化以及反序列化的三种方式(二)
1.什么是JSON? Json[javascript对象表示方法],它是一个轻量级的数据交换格式,我们可以很简单的来读取和写它,并且它很容易被计算机转化和生成,它是完全独立于语言的 2.Json支持下 ...
- Android中Service的一个Demo例子
Android中Service的一个Demo例子 Service组件是Android系统重要的一部分,网上看了代码,很简单,但要想熟练使用还是需要Coding. 本文,主要贴代码,不对Servic ...
- XML解析——DOM解析
XML:可扩展性标记语言,主要用来传输和存储数据,相对于HTML的各种标签规范,XML的标签可以让用户根据语义自己进行定义,适用于web传输. JSON和XML的区别: (1).XML定义 扩展标记语 ...