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

插件：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. mysql 某周的起始和结束日期

    转自:http://bbs.csdn.net/topics/370096126 t_table有数据如下:year    Week2011    22011    32011    42011     ...

  2. MYSQL select查询练习题

    10. 查询Score表中的最高分的学生学号和课程号.(子查询或者排序) select sno,cno from score where degree=(select max(degree) from ...

  3. 谁都能看懂的单点登录（SSO）实现方式（附源码）

    SSO的基本概念 SSO英文全称Single Sign On(单点登录).SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要的登录映射到其他应用中用于同 ...

  4. js017-错误处理与调试

    js017-错误处理与调试 本章内容 理解浏览器报告的错误 处理错误 调试JS代码 17.2 错误处理 17.2.1 try-catch语句 try{ //possible error code }c ...

  5. css015 定位网页上的元素

    css015 定位网页上的元素 一.   定位属性的功能 1.         四中类型的定位 Position: absolute relative fixed static a. 绝对定位 绝对定 ...

  6. UIView UIwindow

    UI:用户界面,用户能看到的各种各样的页面元素 UIview :代表屏幕上的一个矩形区域,管理界面上的内容       创建UIview 1.开辟空间并初始化视图(初始化时,给出视图位置和大小 2.对 ...

  7. Java——文件选择框：JFileChooser

    import java.awt.BorderLayout; import java.awt.Container; import java.awt.event.ActionEvent; import j ...

  8. Java Native Interface Specification

    http://docs.oracle.com/javase/6/docs/technotes/guides/jni/spec/jniTOC.html http://www.ibm.com/develo ...

  9. Interesting things in Unity 4.5 you probably didn't know about

    http://va.lent.in/interesting-things-in-unity-4-5-you-probably-didnt-know-about/

  10. MySQL出错：ERROR 1045 (28000)的解决方法

    MySQL突然不能用了,症状如下: [root@bogon ok]# mysql ERROR (): Access denied for user 'root'@'localhost' (using ...