功能:点击时切换相应的内容或图片

插件:tab.js

要点:tab标签用在导航条上,以data-toggle作被点击者, 以tab-content作内容显示

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title> <!-- Bootstrap CSS -->
<link rel="stylesheet" media="screen" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1 class="text-center">Hello World</h1> <!-- 直接使用bs3-tabs命令即可实现 -->
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#home" aria-controls="home" role="tab" data-toggle="tab">home</a>
</li>
<li role="presentation">
<a href="#tab" aria-controls="tab" role="tab" data-toggle="tab">tab</a>
</li>
</ul> <!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home"><p>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
</p></div>
<div role="tabpanel" class="tab-pane" id="tab"><p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
</p></div>
</div>
</div> <script src="../extlib/jquery-1.11.1.min.js"></script>
<script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<!-- Local bootstrap CSS & JS -->
<script src="../bootstrap-3.3.5-dist/js/collapse.js"></script>
<script src="../bootstrap-3.3.5-dist/js/scrollspy.js"></script>
<script src="../bootstrap-3.3.5-dist/js/transition.js"></script>
<script src="../bootstrap-3.3.5-dist/js/dropdown.js"></script>
<script src="../bootstrap-3.3.5-dist/js/alert.js"></script> </body>
</html>

bootstrap-tab的更多相关文章

  1. bootstrap tab切换如何让鼠标移动自动切换内容

    bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...

  2. 解决Twitter Bootstrap Tab URL链接问题

    例如这样的一个Tabs 代码: <ul class="nav nav-tabs" id="myTab"> <li class="ac ...

  3. NVelocity+Bootstrap tab控件 异常之

    异常信息:Encountered "tings" at line 54, column 55.Was expecting one of:   "(" ...   ...

  4. Bootstrap tab插件的使用

    菜鸟教程链接:http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html 1.例子 <!DOCTYPE html> <html ...

  5. bootstrap tab页

    ---恢复内容开始--- <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> ...

  6. bootstrap tab选项卡

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Bootstrap —— tab切换

    tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. bootstrap插件学习-bootstrap.tab.js

    先看bootstrap-tab.js的结构 var Tab = function ( element ) {} //构造器 Tab.prototype ={} //构造器的原型 $.fn.tab = ...

  9. bootstrap tab标签页

    <ul id="myTab" class="nav nav-tabs"> <li class="active"> & ...

  10. bootstrap插件学习-bootstrap.tab.js(读码)

    先看bootstrap-tab.js的结构 var Tab = function ( element ) {} //构造器 Tab.prototype ={} //构造器的原型 $.fn.tab = ...

随机推荐

  1. PHP的单引号与双引号的区别

    字符串应用 单引号 较好! 在某些特定情况下,单引号的效率比双引号高. PHP把单引号中的数据视为普通字符串,不再处理. 而双引号还要对其中的字符串进行处理,比如遇到$了会把其后的内容视为变量等.

  2. POJ2528Mayor's posters(离散化 + 线段树)

    题目链接: 题意:给定一些高度都相同的海报去贴,问最后能看见几张海报 The picture below illustrates the case of the sample input. { 8,9 ...

  3. python不同模式打开文件的完全列表

    模式 描述 r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式打开一个文件用于只读.文件指针将会放在文件的开头.这是默认模式. r+ 打开一个文件用于读写.文件指 ...

  4. JavaScript函数之美~

    JavaScript函数之美~ 这篇文章,我将就以下几个方面来认识JavaScript中的函数. 函数为什么是对象,如何定义函数? 如何理解函数可以作为值被传递 函数的内部对象.方法以及属性 第一部分 ...

  5. Python-层次聚类-Hierarchical clustering

    层次聚类关键方法#coding:UTF-8#Hierarchical clustering 层次聚类from E_distance import Euclidean_distance from yez ...

  6. C#------DateTime自定义格式

    var text = Convert.ToString(DateTime.Now.ToString("yyyy/MM/dd"));

  7. 查看apt-get安装软件的版本

    apt-cache search name 查询 apt-get install name 安装 dpkg dpkg dpkg-checkbuilddeps dpkg-genchanges dpkg- ...

  8. php5.1以上版本时间戳_时间戳与日期格式转换_相差8小时 的解决方案

    php5.1以上时间戳会与实际时间相差8小时,解决办法如下 .最简单的方法就是不要用php5.1以上的版本--显然这是不可取的方法!!! .修改php.ini.打开php.ini查找date.time ...

  9. token生成过程

    客户端登录会拿到token,然后去登录游戏服务器 了解GUID 可以了解http://blog.sina.com.cn/s/blog_5c8d13830100gku3.html // obviousl ...

  10. Photoshop 融合属性 Unity Shader

    http://forum.unity3d.com/threads/free-photoshop-blends.121661/