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

插件：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. RNN 入门教程 Part 1 – RNN 简介

    转载 - Recurrent Neural Networks Tutorial, Part 1 – Introduction to RNNs Recurrent Neural Networks (RN ...

  2. 高可用与负载均衡（6）之聊聊LVS的三种模式

    LVS的赘述 IPVS,ipvs ,ip_vs是负载均衡器中的内核代码 LVS是完整的负载均衡器+后端服务器.这些组件组成了虚拟服务器. LVS是一个4层负载均衡方案,标准的客户端-服务器网络语义也被 ...

  3. 八数码问题（紫薯P199）

    #include <algorithm> #include <cstdio> #include <cstring> #include <iostream> ...

  4. django rest framework 入门

    django rest framework 入门1-序列化 Serialization 分类: Python 2013-01-22 22:24 11528人阅读 评论(0) 收藏 举报 djangop ...

  5. JS-用js的for循环实现九九乘法表以及其他算数题等

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

  6. spring boot properties

    [转载] 代码从开发到测试要经过各种环境,开发环境,测试环境,demo环境,线上环境,各种环境的配置都不一样,同时要方便各种角色如运维,接口测试, 功能测试,全链路测试的配置,hardcode 肯定不 ...

  7. php爬虫 phpspider

    <?php /** * Created by PhpStorm. * User: brady * Date: 2016/12/9 * Time: 17:32 */ ini_set("m ...

  8. squid代理服务器配置详解

    root@proxy squid]# cat squid.conf## Recommended minimum configuration:#visible_hostname www.jd.com # ...

  9. 用arp-scan扫描局域网IP地址

    1,在安装之前需要安装yum install -y libpcap libpcap-devel如果没有安装yum工具需要用rpm安装如下软件包[root@oradba arp-scan-1.8]# y ...

  10. jquery id选择器 id带"."问题

    例如控件ID为user.id 使用$("#user.id")不能得到正确的结果 必须使用\\转义 即$("#user\\.id")