bootstrap选项卡使用方法解析

选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容

Bootstrap框架中的选项卡主要有两部分内容组成：

选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs）
底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示.

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
 <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
 <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
 <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
 <li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
 <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>

<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
 <div class="tab-pane active" id="bulletin">公告内容面板</div>
 <div class="tab-pane" id="rule">规则内容面板</div>
 <div class="tab-pane" id="forum">论坛内容面板</div>
 <div class="tab-pane" id="security">安全内容面板</div>
 <div class="tab-pane" id="welfare">公益内容面板</div>
</div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

选项卡–选项卡的结构

一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。
关键一点，选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。

对于面板内容tab-pane都是隐藏的，只有当前面板内容才是显示的：

css源码：

.tab-content > .tab-pane {
 display: none;
}
.tab-content > .active {
 display: block;
}

选项卡–触发切换效果

选项卡也定义data属性来触发切换效果。当然前提你也要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求：
1、选项卡导航链接中要设置 data-toggle=”tab”
2、并且设置 data-target=”对应内容面板的选择符(一般是ID)”;
如果是链接的话，还可以通过 href=”对应内容面板的选择符(一般是ID)”
主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。

3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。

选项卡–为选择卡添加fade样式

为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。
在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
 <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
 <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
 <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
 <li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
 <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
 <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
 <div class="tab-pane fade" id="rule">规则内容面板</div>
 <div class="tab-pane fade" id="forum">论坛内容面板</div>
 <div class="tab-pane fade" id="security">安全内容面板</div>
 <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

选项卡–胶囊式选项卡（nav-pills）

在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle=”tab”换成data-toggle=”pill”。

<!-- 选项卡组件（菜单项nav-pills）-->
<ul id="myTab" class="nav nav-pills" role="tablist">
 <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
 <li><a href="#rule" role="tab" data-toggle="pill">规则</a></li>
 <li><a href="#forum" role="tab" data-toggle="pill">论坛</a></li>
 <li><a href="#security" role="tab" data-toggle="pill">安全</a></li>
 <li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
 <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
 <div class="tab-pane fade" id="rule">规则内容面板</div>
 <div class="tab-pane fade" id="forum">论坛内容面板</div>
 <div class="tab-pane fade" id="security">安全内容面板</div>
 <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

选项卡–JavaScript触发方法

在每个链接的单击事件中调用tab(“show”)方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle=”tab” 或 data-toggle=”pill” 的属性，然后通过下面的脚本来调用：

$(function(){
 $("#myTab a").click(function(e){
 e.preventDefault();
 $(this).tab("show");
 });
})

实例 ：
<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab2" class="nav nav-tabs" role="tablist">
 <li><a href="#a" role="tab">娱乐</a></li>
 <li><a href="#b" role="tab">房产</a></li>
 <li><a href="#c" role="tab">国内</a></li>
 <li><a href="#d" role="tab">国外</a></li> 
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent2" class="tab-content">
 <div class="tab-pane fade in active" id="a">娱乐内容面板</div>
 <div class="tab-pane fade" id="b">房产内容面板</div>
 <div class="tab-pane fade" id="c">国内内容面板</div>
 <div class="tab-pane fade" id="d">国外内容面板</div> 
</div>

<script> 
 $(function(){
 $("#myTab2 a").click(function(e){
 e.preventDefault();
 $(this).tab("show");
 });
})
</script>

下文点击查看

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# bootstrap选项卡  # bootstrap选项卡组件  # bootstrap选项卡面板  # 全面解析Bootstrap中tab（选项卡）的使用方法  # BootStrap tab选项卡使用小结  # bootstrap实现tab选项卡切换  # 简单实现bootstrap选项卡效果  # bootstrap导航、选项卡实现代码  # bootstrap选项卡扩展功能详解  # Bootstrap选项卡与Masonry插件的完美结合  # Bootstrap选项卡学习笔记分享  # 浅谈bootstrap源码分析之tab(选项卡)  # BootstrapVue选项卡标题增加关闭按钮的方法  # 选项卡  # 菜单项  # 的是  # 都是  # 国外  # 放在  # 国内  # 还可以  # 才是  # 你也  # 一是  # 只需  # 点击这里  # 或者是  # 点击查看  # 自定义  # 几点  # 还想  # 还可  # 要将 

相关文章： 如何在Windows 2008云服务器安全搭建网站？  Python路径拼接规范_跨平台处理说明【指导】  b2c电商网站制作流程,b2c水平综合的电商平台？  建站主机助手选型指南：2025年热门推荐与高效部署技巧  如何生成腾讯云建站专用兑换码？  海南网站制作公司有哪些,海口网是哪家的？  建站之星安装后界面空白如何解决？  建站之星会员如何解锁更多建站功能？  如何通过FTP服务器快速搭建网站？  如何确认建站备案号应放置的具体位置？  历史网站制作软件,华为如何找回被删除的网站？  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  网站制作知乎推荐,想做自己的网站用什么工具比较好？  C++如何将C风格字符串（char*）转换为std::string？（代码示例）  专业网站制作服务公司,有哪些网站可以免费发布招聘信息？  c++怎么使用类型萃取type_traits_c++ 模板元编程类型判断【方法】  如何在Golang中使用encoding/gob序列化对象_存储和传输数据  行程制作网站有哪些,第三方机票电子行程单怎么开？  网页设计网站制作软件,microsoft office哪个可以创建网页？  深圳网站制作平台,深圳市做网站好的公司有哪些？  如何通过主机屋免费建站教程十分钟搭建网站？  建站168自助建站系统：快速模板定制与SEO优化指南  大连 网站制作,大连天途有线官网？  网站制作模板下载什么软件,ppt模板免费下载网站？  免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的？  Avalonia如何实现跨窗口通信 Avalonia窗口间数据传递  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  建站之星2.7模板快速切换与批量管理功能操作指南  赚钱网站制作软件,建一个网站怎样才能赚钱?是如何盈利的？  免费ppt制作网站,有没有值得推荐的免费PPT网站？  如何在万网ECS上快速搭建专属网站？  济南网站建设制作公司,室内设计网站一般都有哪些功能？  个人网站制作流程图片大全,个人网站如何注销？  平台云上自主建站：模板化设计与智能工具打造高效网站  公司网站制作价格怎么算,公司办个官网需要多少钱？  如何使用Golang table-driven基准测试_多组数据测量函数效率  如何选择最佳自助建站系统？快速指南解析优劣  香港服务器建站指南：免备案优势与SEO优化技巧全解析  官网自助建站平台指南：在线制作、快速建站与模板选择全解析  如何选择CMS系统实现快速建站与SEO优化？  北京制作网站的公司,北京铁路集团官方网站？  学校建站服务器如何选型才能满足性能需求？  微信小程序制作网站有哪些,微信小程序需要做网站吗？  宝塔新建站点为何无法访问？如何排查？  打鱼网站制作软件,波克捕鱼官方号怎么注册？  网页设计与网站制作内容,怎样注册网站？  西安专业网站制作公司有哪些,陕西省建行官方网站？  长春网站建设制作公司,长春的网络公司怎么样主要是能做网站的？  实现点击下箭头变上箭头来回切换的两种方法【推荐】