页面的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也有它的局限性,相同的界面在手机上显示可能 ...
随机推荐
- Java 十大排序算法
目录: 1.冒泡排序(Bubble Sort) 2.选择排序(Selection Sort) 3.插入排序(Insertion Sort) 4.希尔排序(Shell Sort) 5.归并排序(Merg ...
- 洛谷 P1020导弹拦截题解
洛谷链接:https://www.luogu.org/problem/P1020 题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到 ...
- python中while循环的基本使用
一.while循环 while 条件: 如果条件为True,会一直循环 代码块(循环体) else: 当上面的条件为假.才会执行 执行顺序:判断条件是否为真.如果真,执行循环 ...
- Javascript获取页面的各种坐标汇总
说明,本文全部内容都基于各浏览器的标准渲染模式.也就是在HTML文件首部有标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- java 获取某年某月最后一天
Calendar calendar = Calendar.getInstance(); calendar.set(Calendar.YEAR, 2016); calendar.set(Calendar ...
- react 学习记录
1. 脚手架搭建项目 create-react-app https://www.jianshu.com/p/d196761c8332 2. UI框架 https://ant.design/docs ...
- LINUX系统的常用知识
常用的命令: man config 查看linux里面所有命令的详细描述 man pwd 按回车是一行一行的走,按空格是一页一页的走,按q键是退出的意思 mkdir test 创建文件夹p ...
- matlab运行程序时出现failed to start a parallel pool
运行matlab做并行时得到如下报错: failed to start a parallel pool. (For information in addition to the causing err ...
- Java - 框架之 SpringMVC
一. 简单配置 (XML) 1. web.xml <?xml version="1.0" encoding="UTF-8"?> <web-ap ...
- jQuery弹出提示信息自动消失简洁版
// 在bootstrap中可以,可以使用如下方式实现弹出提示信息自动消失,如果没有使用bootstrap框架,可以自定义样式 //tip是提示信息,type:'success'是成功信息,'dang ...