<!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页的更多相关文章

  1. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  2. 自制tab页

    没事自己弄着玩,写了个tab页.不要当真.想看就看看.希望相互学习. 效果预览:html源码: <!DOCTYPE html> <html lang="en"&g ...

  3. ECSHOP：首页实现显示子分类商品，并实现点击Tab页切换分类商品

    例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始:    1. 打开调试开关     文件地址:include/cls_template.php 找到 : functi ...

  4. 跨浏览器tab页的通信解决方案尝试

    目标 当前页面需要与当前浏览器已打开的的某个tab页通信,完成某些交互.其中,与当前页面待通信的tab页可以是与当前页面同域(相同的协议.域名和端口),也可以是跨域的. 要实现这个特殊的功能,单单使用 ...

  5. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  6. tab页切换

    做了一个tab页切换.点击不同tab,显示对应的内容信息 如图 =================HTML===================== <!doctype html public ...

  7. H+ 编辑tab页 保存后 刷新列表tab页 并关闭自已。tabA页调用tabB页的方法

    //注:在contabs.js文件中 $(function () { }); 方法外 加入 //注: data-name="' + menuName + '" 这句是加入的自定义属 ...

  8. 切换tab页时，tab页中的echart变形问题

    本文为博主原创,未经允许,不得转载: 在两个tab页中,分别展现了两个echart图表,同样的格式与写法,但只有在默认选中的tab页中的图表显示的是正常的, 但进入另一个tab页中时,图表则产生了变形 ...

  9. 值得分享的Bootstrap Ace模板实现菜单和Tab页效果（转）

    Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...

随机推荐

  1. 两天学会DirectX 3D之入门

    环境配置以及背景知识 环境 Windows 8.1 64bit VS2013 Microsoft DirectX SDK (June 2010) NVDIA Geforce GT755 环境的配置參考 ...

  2. Unity multiplayer

    using UnityEngine; using System.Collections; public class multiplayer_Button : MonoBehaviour { void ...

  3. 基于.NET平台常用的框架技术整理

    个人整理 部分收藏于:http://www.cnblogs.com/hgmyz/p/5313983.html 自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线 ...

  4. C# DevExpress GridControl使用方法

    一.如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 二.如何新增一条记录 ().gridView.AddNe ...

  5. WebAssembly学习(六)：AssemblyScript - 限制与类型

    一.限制 将无类型的JavaScript编译为WebAssembly没有意义,因为它最终会导致运行其中较慢的一个JavaScript. 相反,AssemblyScript专注于WebAssembly擅 ...

  6. Vert.x，一个异步、可伸缩、并发应用框架引发的思考

    2012年听说过Vert.x这个框架之后,去年大致了解了下,最近开始进一步熟悉这个框架. Vert.x是一个用于下一代异步.可伸缩.并发应用的框架,旨在为JVM提供一个Node.js的替代方案.开发者 ...

  7. 洛谷 P1889 士兵站队

    P1889 士兵站队 题目描述 在一个划分成网格的操场上, n个士兵散乱地站在网格点上.由整数 坐标 (x,y) 表示.士兵们可以沿网格边上.下左右移动一步,但在同时刻任一网格点上只能有名士兵.按照军 ...

  8. php 图片局部打马赛克

    php 图片局部打马赛克 原理: 对图片中选定区域的每一像素,添加若干宽度及高度,生成矩型.而每一像素的矩型重叠在一起.就形成了马赛克效果. 本例使用GD库的imagecolorat获取像素颜色,使用 ...

  9. android 图片特效处理之怀旧效果

    图片特效处理系列将介绍图片的像素点的特效处理,这些物资注重的是原理.也就是说只要你知道这些算法不管是C++,VB,C#,Java都可以做出相同的特效.下面将介绍图片怀旧效果的算法.算法如下: 上面公式 ...

  10. webservices 服务器未能识别 HTTP 头 SOAPAction 的值:.

    转自:https://blog.csdn.net/dxfasr/article/details/25029063 在用java发送给webservice服务器的时候报如下错误: AxisFault f ...