页面的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也有它的局限性,相同的界面在手机上显示可能 ...
随机推荐
- 爬虫(二)-创建项目&应用
一.回顾 上篇已经讲解了python-django的环境搭建,本次将继续上次的课程,开始创建项目及应用. 上篇的验证结果为: 本次将加上创建应用之后浏览器打开演示~ 二.创建项目 1)使用django ...
- python使用二分法实现在一个有序列表中查找指定的元素
二分法是一种快速查找的方法,时间复杂度低,逻辑简单易懂,总的来说就是不断的除以2除以2... 例如需要查找有序list里面的某个关键字key的位置,那么首先确认list的中位数mid,下面分为三种情况 ...
- 远程连接Linux mysql报错：Access denied for user ‘root’@‘localhost’(using password: YES)的解决方法
在新安装好的Centos7上刚安装好mysql,准备进去看看,但是登陆的时候,发现报错啦: ERROR 1045 (28000): Access denied for user 'root'@'loc ...
- 单片机开发之C语言编程基本规范
为了提高源程序的质量和可维护性,从而最终提高软件产品生产力,特编写此规范.本标准规定了程序设计人员进行程序设计时必须遵循的规范.本规范主要针对单片机编程语言和08编译器而言,包括排版.注释.命名.变量 ...
- python - django (logging 日志配置和简单使用)
1. settings 配置 # 配置日志 LOGGING = { 'version': 1, 'disable_existing_loggers': True, 'formatters': { 's ...
- elasticsearch7.x集群安装（含head、bigdesk、kibana插件）
网址:https://www.elastic.co 192.168.14.239 es-node1192.168.14.240 es-node2192.168.14.241 es-node3 ==== ...
- codepush安装
https://github.com/lisong/code-push-server/blob/master/docs/README.md =====> 安装mysql下载mysql yum r ...
- 运算符 & | ^ ~ >> << 讲解
字节”是byte,“位”是bit :1 byte = 8 bit : char 在java中是2个字节.java采用unicode,2个字节(16位)来表示一个字符. char 16位2个字节 byt ...
- java学习笔记（2）注释、public lcass、class、标识符、字面值、变量
java学习笔记(1)中说过了java的一些基础知识,发展史,特点,编译和运行过程,配置环境变量等,接下来开始介绍java的语法等只是点 关于java源程序中的注释: *什么是注释?注释的作用是什么 ...
- 「雅礼集训 2018 Day2」农民
传送门 Description 「搞 OI 不如种田.」 小 D 在家种了一棵二叉树,第 ii 个结点的权值为 \(a_i\). 小 D 为自己种的树买了肥料,每天给树施肥. 可是几天后,小 D 却 ...