标签页(Tab)在Bootstrap导航元素一章中简介过，通过结合一些data属性，您可以轻松地创建一些标签页界面。通过这个插件您可以把内容放置在标签页或胶囊式标签页甚至是下拉菜单标签页中。

用法

您可以通过以下两个方式来启用标签页

1、通过data属性：您需要添加data-toggle="tab"或data-toggle="pill"到锚文本链接中。例如：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div style="padding:20px">
<ul class="nav nav-tabs"role="navigation">
<li class="active"><a href="#html5"data-toggle="tab">Html5</a></li>
<li><a href="#css3" data-toggle="tab">Css3</a></li>
<li><a href="#javascript"data-toggle="tab">Javascript</a></li>
<li><a href="#jquery"data-toggle="tab">jQuery</a></li>
<li><a href="#jqueryui"data-toggle="tab">jQueryUI</a></li>
<li><a href="#bootstrap"data-toggle="tab">Bootstrap</a></li>
<li><a href="#cnet"data-toggle="tab">C#.Net</a></li>
<li><a href="#mssql"data-toggle="tab">MsSql</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle"data-toggle="dropdown"id="myTabDrop">Html5前端<span class="caret"></span></a>
<ul class="dropdown-menu"role="menu"aria-labelledby="myTabDrop">
<li><a href="#html5" data-toggle="tab">Html5</a></li>
<li><a href="#css3" data-toggle="tab">Css3</a></li>
<li><a href="#javascript" data-toggle="tab">Javascript</a></li>
<li><a href="#jquery" data-toggle="tab">jQuery</a></li>
<li><a href="#jqueryui" data-toggle="tab">jQueryUI</a></li>
<li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>
<li><a href="#cnet" data-toggle="tab">C#.Net</a></li>
<li><a href="#mssql" data-toggle="tab">MsSql</a></li>
</ul>
</li>
</ul>
<div class="tab-content"id="myTabContent">
<div class="tab-pane fade in active"id="html5">
<h2>Html5简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade"id="css3">
<h2>Css3简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade"id="javascript">
<h2>Javascript简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade"id="jquery">
<h2>jQuery简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade"id="jqueryui">
<h2>jQueryUI简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade"id="bootstrap">
<h2>Bootstrap简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade"id="cnet">
<h2>C#.Net简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade"id="mssql">
<h2>MsSql简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
</div>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

2、通过javascript:您可以使用javascript来启用标签页，.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。实例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:20px">
<ul class="nav nav-tabs" role="navigation"id="myTab">
<li class="active"><a href="#html5">Html5</a></li>
<li><a href="#css3">Css3</a></li>
<li><a href="#javascript">Javascript</a></li>
<li><a href="#jquery">jQuery</a></li>
<li><a href="#jqueryui">jQueryUI</a></li>
<li><a href="#bootstrap">Bootstrap</a></li>
<li><a href="#cnet">C#.Net</a></li>
<li><a href="#mssql">MsSql</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="myTabDrop">Html5前端<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop">
<li><a href="#html5">Html5</a></li>
<li><a href="#css3">Css3</a></li>
<li><a href="#javascript">Javascript</a></li>
<li><a href="#jquery">jQuery</a></li>
<li><a href="#jqueryui">jQueryUI</a></li>
<li><a href="#bootstrap">Bootstrap</a></li>
<li><a href="#cnet">C#.Net</a></li>
<li><a href="#mssql">MsSql</a></li>
</ul>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade in active" id="html5">
<h2>Html5简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade" id="css3">
<h2>Css3简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade" id="javascript">
<h2>Javascript简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade" id="jquery">
<h2>jQuery简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade" id="jqueryui">
<h2>jQueryUI简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade" id="bootstrap">
<h2>Bootstrap简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade" id="cnet">
<h2>C#.Net简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade" id="mssql">
<h2>MsSql简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#myTab a").click(function (e) {
e.preventDefault();
$(this).tab("show");
})
})
</script>

</body>
</html>

Bootstrap标签页(Tab)插件的更多相关文章

  1. Bootstrap标签页(Tab)插件事件

    事件 下表列出了标签页(Tab)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tab 该事件在标签页显示时触发,但是必须在新标签页被显示之前.分别使用 even ...

  2. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  3. 解决Bootstrap标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  4. bootstrap 标签页tab切换js（含报错原因）

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  5. Bootstrap 标签页（Tab）插件

    摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...

  6. 第二百四十五节，Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  7. 标签页tab.js 在栏目之间切换，局部变化

    1.在使用bootstrap 中,我们会用到在栏目之间切换,来刷新页面的局部,可以使用下面的方法 <link rel="stylesheet" href="http ...

  8. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  9. Bootstrap 标签页和工具提示插件

    一．标签页 标签页也就是通常所说的选项卡功能. //基本用法 <ul class="nav nav-tabs"> <li class="active&q ...

随机推荐

  1. php SHA256Hex加密

    function SHA256Hex($str){ $re=hash('sha256', $str, true); return bin2hex($re); }

  2. 【NOIP模拟赛】密码锁

    题目描述 hzwer有一把密码锁,由N个开关组成.一开始的时候,所有开关都是关上的.当且仅当开关x1,x2,x3,…xk为开,其他开关为关时,密码锁才会打开. 他可以进行M种的操作,每种操作有一个si ...

  3. centos6上安装CDH5.7

    目录 一.环境说明及所需软件包... 1 1.环境说明... 1 2.所需软件及说明... 1 二.安装前的主机准备(所有主机都有做) 2 1.配置主机名和修改host文件... 2 2.下载系统基本 ...

  4. shell学习（9）- du和df区别及详解

    清明小长假来加班,总得干点啥吧,今天就说说du 和df的区别. 1.区别 du,disk usage,是通过搜索文件来计算每个文件的大小然后累加,du能看到的文件只是一些当前存在的,没有删除的.他计算 ...

  5. 学习笔记之a,b=b,a+b与a=b,b=a+b的区别

       兔子序列中用到的常用的计算方法:a,b=b,a+b 当我们真正去运行的时候,会发现它与a=b,b=a+b是有区别的 实例代码如下: def YY(one): a,b,n=0,1,0 while( ...

  6. 转 v$session_longops视图

    转http://www.dbdream.com.cn/2013/10/14/vsession_longops%E8%A7%86%E5%9B%BE/ 1.有的时候不准确 ,我看到 session wai ...

  7. Linux上常用命令整理（一）—— cat

    近几个月刚从windows上转过来,开始慢慢熟悉linux,先不撕比到底哪个更好,首先要怀着相互借鉴的精神去了解各个平台. Linux上做开发,除去使用文本编辑器做开发的大神之外,大家(包括我这种菜鸟 ...

  8. 破解百度翻译页面api参数加密

    我们的目标 https://fanyi.baidu.com/      找到获取翻译的请求 是这个 https://fanyi.baidu.com/v2transapi 查看一下post提交的表单,是 ...

  9. PIX 防火墙

    ---恢复内容开始--- 一 , PIX 防火墙的认识 PIX 是cisco 的硬件防火墙 硬件防火墙的工作速度快,使用方便. PIX 有很多型号,并发连接数是PIX防火墙的重要参数   PIX 25 ...

  10. C# 序列化与反序列化json

    与合作伙伴讨论问题,说到的c++与c#数据的转换调用,正好就说到了序列化与反序列化,同样也可用于不同语言间的调用,做了基础示例,作以下整理: using System.Data; using Syst ...