JavaScript tab页

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4 <meta charset="UTF-8">
  5 <title>实践题 - 选项卡</title>
  6 <style type="text/css">
  7 /* CSS样式制作 */
  8 .tab-div {
  9 width: 400px;
 10 position: relative; /*作为选项卡内容的定位*/
 11 }
 12 ul {
 13 list-style: none;
 14 }
 15 .tab {
 16 width: 400px;
 17 overflow: hidden;
 18 margin: 0;
 19 padding: 0;
 20
 21 position: relative;
 22 z-index: 2;
 23 }
 24 .tab li{
 25 float: left;
 26 width: 80px;
 27 height: 30px;
 28 line-height: 30px;
 29 text-align: center;
 30 border: 1px solid #DDD;
 31 border-bottom: 0;
 32 margin-left: 10px;
 33 background: #fff;
 34 cursor: pointer;
 35 }
 36 .tab-content {
 37 width: 350px;
 38 /*position: absolute;*/
 39 border: 1px solid #DDD;
 40 border-top: 3px solid #e4393c;
 41
 42 text-align: center;
 43
 44 position: absolute;
 45 top: 31px;
 46 left: 0;
 47 }
 48 .tab-content ul {
 49 margin: 0;
 50 padding: 10px;
 51 }
 52 .tab-content li {
 53 padding: 10px;
 54 }
 55 .tab-content li a {
 56 color: #000;
 57 text-decoration: none;
 58 }
 59 .tab-content li a:hover {
 60 color: #e4393c;
 61 text-decoration: underline;
 62 }
 63 .tab .tab-active {
 64 border-top: 3px solid #e4393c;
 65 border-bottom: 3px solid #fff;
 66 }
 67 .tab-content-show {
 68 display: block;
 69 }
 70 .tab-content-hide {
 71 display: none;
 72 }
 73 </style>
 74 <script type="text/javascript">
 75 // JS实现选项卡切换
 76 window.onload = function() {
 77 var tabList = document.getElementById("tab-list");
 78 var aLis = tabList.getElementsByTagName("li");
 79 var tDiv = document.getElementById("tDiv");
 80 var contents = tDiv.getElementsByTagName("div");
 81
 82 for(var i = 0; i < aLis.length; i++) {
 83 aLis[i].index = i;
 84 aLis[i].onclick = function() {
 85 for(var j = 0; j < aLis.length; j++) {
 86 aLis[j].className = '';
 87 }
 88 this.className = "tab-active";
 89
 90 for(var j = 0; j < contents.length; j++) {
 91 contents[j].className = "tab-content tab-content-hide";
 92 }
 93 contents[this.index].className = "tab-content tab-content-show";
 94 };
 95 }
 96 };
 97
 98 </script>
 99
100 </head>
101 <body>
102 <!-- HTML页面布局 -->
103 <div id="tDiv" class="tab-div">
104 <ul id="tab-list" class="tab">
105 <li class="tab-active">房产</li>
106 <li>家居</li>
107 <li>二手房</li>
108 </ul>
109 <div class="tab-content tab-content-show">
110 <ul>
111 <li><a href="#">275万购昌平邻铁三居 总价20万买一居</a></li>
112 <li><a href="#">200万内购五环三居 140万安家东三环</a></li>
113 <li><a href="#">北京首现零首付楼盘 53万购东5环50平</a></li>
114 <li><a href="#">京楼盘直降5000 中信府 公园楼王现房</a></li>
115 </ul>
116 </div>
117 <div class="tab-content tab-content-hide">
118 <ul>
119 <li><a href="#">40平出租屋大改造 美少女的混搭小窝</a></li>
120 <li><a href="#">经典清新简欧爱家 90平老房焕发新生</a></li>
121 <li><a href="#">新中式的酷色温情 66平撞色活泼家居</a></li>
122 <li><a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
123 </ul>
124 </div>
125 <div class="tab-content tab-content-hide">
126 <ul>
127 <li><a href="#">通州豪华3居260万 二环稀缺2居250w甩</a></li>
128 <li><a href="#">西3环通透2居290万 130万2居限量抢购</a></li>
129 <li><a href="#">黄城根小学学区仅260万 121平70万抛!</a></li>
130 <li><a href="#">独家别墅280万 苏州桥2居优惠价248万</a></li>
131 </ul>
132 </div>
133 </div>
134 </body>
135 </html>

View Code

转载于:https://www.cnblogs.com/xuwei123/p/10183984.html

JavaScript tab页相关推荐

JavaScript原生代码编写选项卡Tab页跳转功能
本文主要介绍使用 JavaScript 原生代码编写选项卡Tab页的跳转功能. 一.先来看看效果图二.准备文字素材文字素材选择诗经里面的三首古诗,分别是关雎.蒹葭和采薇 <关雎> 关关 ...
局部刷新时间 jsp_局部区块多个报表 TAB 页切换及局部区块的参数查询
在企业的业务系统中,如何从纷繁复杂的数据中抽丝剥茧看到关键数据信息呢?一个重要的途径就是将企业和各部门运营中关键的 KPI 集中在一起显示,同时尽量省去在企业的各个业务系统中分别查找数据. 下面是我近 ...
asp.net 点击查询跳转到查询结果页面_如何控制报表组点查询后默认选择的 tab 页...
报表组由多个报表组成,在 web 端一般以多 tab 页形式进行展现.而不同的用户关注点往往不同,通常会要求报表组打开时默认展示自己关注的 tab 页,为此报表工具提供了控制报表组的 js 函数: g ...
切换tab页时，tab页中的echart变形问题
本文为博主原创,未经允许,不得转载: 在两个tab页中,分别展现了两个echart图表,同样的格式与写法,但只有在默认选中的tab页中的图表显示的是正常的, 但进入另一个tab页中时,图表则产生了变形 ...
23个实用 Javascript Tab导航插件
实现tab页很多方法,有一些是用纯CSS实现,其他大多数是基于jquery.mootools或者其他js框架实现,既然有这么多可以拿来即用的插件,又何苦重复造轮子. Jquery插件 1. jQue ...
一起谈.NET技术，ASP.NET MVC2.0在Tab页中实现异步无刷新分页
概述很多地方都存在以Tab页来呈现数据的方式,比如网易.新浪.搜狐.QQ等知名的门户网站的首页,还有大家熟知的博客园首页,都是用了tab页来显示数据.大家之所以喜欢用Tab,因为它能大大的增加显示数 ...
前端框架iviewui使用示例之菜单+多Tab页布局
[b]前言:[/b] 综合使用menu.tab实现菜单+Tab页的布局模式.学习调试作品,代码不是很严谨,但基本功能都实现了. [b]效果:[/b] [img]http://dl2.iteye.com ...
bootdo项目，js打开页面为新的tab页
bootdo 打开新页面为新的tab页 contabs.js 最后添加一下代码 * 新增一个选项卡* url :选项卡的内容(跳转的地址)* title:选项卡的标题* size: name的ifra ...
在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...

JavaScript tab页

JavaScript tab页相关推荐

最新文章

热门文章