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

插件：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/