页面的Tab选项卡 简单实例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
div,ul,li,a {
margin:0;
padding:0;
}
ul,li {
list-style:none;
}
body {
font-size:14px;
background-color:#f7f7f7;
}
a {
color:#666;
text-decoration:none;
}
a:hover {
color:#F60;
}
#title li {
float:left;
//margin-right:20px;
padding:5px;
border:1px solid #dedede;
background:#FFF;
//width:50px;
text-align:center;
height:28px;
line-height:28px;
position:relative;
z-index:1000;
}
#title,#wrap {
clear:both;
background-color:#FFF;
width:300px;
}
#wrap {
border:1px solid #dedede;
height:300px;
position:relative;
top:-1px;
padding:10px;
}
#wrap>div {
display:none;
height:100%;
overflow:auto;
}
#wrap .active {
display:block;
}
#title .ho {
border-bottom:1px solid #FFF;
background:red;
}
#title .ho a {
color:white;
} </style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function() {
function tab(pa) {
$(pa + ".title li").click(function() {
//找到是点击第几个
var ind = $(pa + "#title li").index($(this));
//alert(ind);
//以前显示的隐藏
$(pa + ".wrap div:visible").hide();
//第几个显示
$(pa + ".wrap div:eq(" + ind + ")").show();
//有高亮ho 去掉高亮ho
$(pa + ".title li.ho").removeClass("ho");
//被点击的元素添加ho
$(this).addClass("ho"); }) //clicked
} //tab ed
tab(".tab1 "); $("#btnOK").click(function(){alert('ok')});
$("#btnCancel").click(function(){alert('cancel')});
})
</script> </head>
<body>
<div class="tab1" style="margin:100px;">
<ul id="title" class="title">
<li class="ho"><a href="javascript:void(0)">话费ggggg</a></li>
<li><a href="javascript:void(0)">游戏</a></li>
<li><a href="javascript:void(0)">旅行xxxx</a></li>
<li><a href="javascript:void(0)">保险</a></li>
</ul>
<div id="wrap" class="wrap">
<div class="active"> this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1<br>this is con1
</div>
<div> this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>this is con2<br>
</div>
<div> this is con3</div>
<div>this is con4</div>
</div>
</div> <div style="height:400px;width:400px;margin:100px;background-color:#FFF;">
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
菜鸟教程
</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li><a href="#jmeter" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" data-toggle="tab">ejb</a></li> </ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home" style="padding:5;">
<p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
</div>
</div>
</body>
</html>
页面的Tab选项卡 简单实例的更多相关文章
- 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用
上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...
- 关于一个页面的tab切换整体页面刷新而tab标签处是同一个文件怎么做焦点的问题
解决方法,不能直接写点击效果就要在超链接中加一个参数,根据参数的值去给变焦点的效果,实现方法如下: <div class="vip_search"> ...
- jquery翻页turnjs简单实例
jquery翻页turnjs简单实例<pre><div id="flipbook"> <div class="hard" styl ...
- jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- tab选项卡实例
之前也见了不少的tab选项卡,但是下面这个选项卡是一个页面中有多个时互不影响的. <head> <meta charset="utf-8"> <met ...
- html页面的CSS、DIV命名规则
CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...
- CSS学习笔记（7）--html页面的CSS、DIV命名规则
html页面的CSS.DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整 ...
- js基础练习一之tab选项卡
最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...
- Android Fragment 简单实例
Android上的界面展示都是通过Activity实现的.Activity实在是太经常使用了.我相信大家都已经很熟悉了,这里就不再赘述. 可是Activity也有它的局限性,相同的界面在手机上显示可能 ...
随机推荐
- 使用Cloudera Manager搭建Hive服务
使用Cloudera Manager搭建Hive服务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装Hive环境 1>.进入CM服务安装向导 2>.选择需要 ...
- CH6301 疫情控制
6301 疫情控制 0x60「图论」例题 描述 H国有 n 个城市,这 n 个城市用 n-1 条双向道路相互连通构成一棵树,1号城市是首都,也是树中的根节点. H国的首都爆发了一种危害性极高的传染病. ...
- oracle删除重复数据，只保留一条
比如,某个表要按照id和name重复,就算重复数据 delete from 表名 where rowid not in (select min(rowid) from 表名 group by id,n ...
- Dubbo源码分析(2)：ServiceBean
ServiceBean时序图
- Linux Vbox 桥接模式上网配置
1.Bridged Adapter模式(桥接模式)特点: 1)如果主机可以上网,虚拟机可以上网 2)虚拟机之间可以ping通 3)虚拟机可以ping通主机 4)主机可以ping通虚拟机以上各点基于一个 ...
- C语言中一个字符对应一个ascii码；占一个1个字节8个二进制位；存到内存中也是用ascii的十进制的二进制表示
/** 只读变量和常量 const 只读 const int a; int const a;//同上面的代码行是等价的,都表示一个常整形数. int *const a;//const具有"左 ...
- Kafka 深入核心参数配置
Kafka 真是一个异常稳定的组件,服务器上我们部署了 kafka_2.11-1.0.1 版本的 kafka 除了几次计算时间太长触发了 rebalance 以外,基本没有处理过什么奇怪的问题. 但是 ...
- BAT 按文件修改日期自动建立日期文件夹并移动
@ECHO OFF&setlocal enabledelayedexpansion@rem 第二行的路径可以改成源目录路径,然后将BAT放源目录外执行.否则这个BAT文件也会被分类.@rem ...
- Java SpringBoot使用Redis缓存和Ehcache
<?xml version="1.0" encoding="UTF-8"?> <ehcache xmlns:xsi="http:// ...
- Tkinter 之ProgressBar进度条标签
一.参数说明 参数 作用 cursor 鼠标位于进度条内时的形状 length 进度条长度 maximum 进度条最大刻度值 mode 进度条的模式.有两种:‘determinate’和’indet ...