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

插件：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. Mac系统搭建Go语言Sublime Text 2环境配置

    Go语言是谷歌自家的编译型语言,旨在不损失性能的前提下降低代码复杂率.其优势是让软件充分发挥多核心处理器同步多工的优点,并可解决面向对象程序设计的麻烦. 一.安装Golang的SDK 在官网http: ...

  2. POJ 2240 - Arbitrage（bellman_ford & floyd）

    题意: 给出一些货币和货币之间的兑换比率,问是否可以使某种货币经过一些列兑换之后,货币值增加. 举例说就是1美元经过一些兑换之后,超过1美元.可以输出Yes,否则输出No. 分析: 首先我们要把货币之 ...

  3. python 基于windows环境的ftp功能

    描述: 1.基于备份服务器部署的py程序,将需要备份主机目录下的内容下载至备份服务器(服务端和远端都是windows server 2008) 2.py程序部署在windows服务器,后台运行,基于b ...

  4. 深入JVM-垃圾回收概念与算法

    一.认识垃圾回收 谈到垃圾回收(Garbage Collection,简称GC),GC中的垃圾,特指存在于内存中的.不会再被使用的对象.对于内存空间的管理来说,识别和清理垃圾对象是至关重要的. 二.常 ...

  5. 忘记常访问网站密码怎么办？教你如何查看浏览器已保存的密码，如何简单查看Chome浏览器保存的密码？

    利用场景: 同事或朋友外出有事,电脑未锁屏离开座位.可以利用这一间隙,查看Ta在Chrome浏览器上保存的账号密码 查看逻辑: 当我们要查看Chrome浏览器上保存的密码时,点击显示,会弹出一个对话框 ...

  6. C#------获取最后一个"/"字符后面的所有内容

    public ActionResult GetFile(string id) { var path = _db.MailAtchs.Where(p => p.MailID == new Guid ...

  7. Spring解析实践

    这几天重新把传智播客的黎活明的Spring2.5的教程学习了一遍,跟着上面的解析Spring的过程跟着制作了一个简单的Spring IOC和Spring AOP,先在贴上来给大家参考一下. 1:管理B ...

  8. sql优化之not in

    sql : select ID from awhere XX <> 0 and ID not in (select ID from b) 4万多条记录,执行了316秒,无法接受.   优化 ...

  9. 20145212《Java程序程序设计》课程总结

    20145212<Java程序程序设计>课程总结 一.每周读书笔记链接汇总 第一周读书笔记 第二周读书笔记 第三周读书笔记 第四周读书笔记 第五周读书笔记 第六周读书笔记 第七周读书笔记 ...

  10. Redis学习——链表源码分析

    0. 前言 Redis 中的链表是以通用链表的形式实现的,而对于链表的用途来说,主要的功能就是增删改查,所以对于查找来说,redis其提供了一个match函数指针,用户负责实现其具体的匹配操作,从而实 ...