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

插件：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. Character literal must contain exactly one character -- 一天一点小知识

    编程语言高度抽象化以后,错误也越来越让人难以理解了, NET编程最常见的一个错误, Object not set to the reference ,过了好久,才明白过来, 就是不明白为啥微软不说   ...

  2. Sublime Text 3 快捷键整理

    选择类Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本.Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.Ctrl+L 选中整行,继续操作则继续选择下一行, ...

  3. Matlab小技巧

    记录一些用Matlab的技巧. //imshow全屏 subplot(1,3,3); imshow(topSketMat); hold on; set(gcf, 'units', 'normalize ...

  4. quartz_jobs.xml标准配置

    <?xml version="1.0" encoding="UTF-8"?><job-scheduling-data xmlns=" ...

  5. HBase filter shell操作

    创建表 create 'test1', 'lf', 'sf' lf: column family of LONG values (binary value) -- sf: column family ...

  6. Oracle11g的exp导出空表提示EXP-00011： 不存在

    刚lg问我11g无法导出空表,实验了下,果真如此. 原因:11g默认创建一个表时不分配segment,只有在插入数据时才会产生(当然也可以强制分配),以节省磁盘空间. 对于已经存在的空表解决办法: 就 ...

  7. MySQL的外键是什么和它的作用

    从上图可以看见,表1添加一个外键,这个外键就是表2中的学号字段,那么这样表1就是主表,表2就是子表.所以结合2张表就能保持数据的一致性.完整性. 外键的一些事项:1.表1可以有一个或者多个外键,也可以 ...

  8. JavaScript学习笔记——事件

    javascript事件基础和事件绑定 一.事件驱动 1.事件 javascript侦测到的用户的操作或是页面的一些行为(怎么发生的) 2.事件源 引发事件的元素.(发生在谁的身上)3.事件处理程序 ...

  9. cobbler自动安装脚本

    #!/bin/sh #coding=utf8 ################################################################## #将如下IP修改成你 ...

  10. 通过XHR  API来下载和上传图片

    1.不用HTML中的img标签来下载图片,通过XHR  api来下载图片: var xhr = new XMLHttpRequest(); xhr.open('GET','/img/tooth-int ...