当前位置：首页 > 资讯 > 技术文档

bootstrap选项卡使用方法解析

时间：2020-02-16 11:26 编辑：来源：阅读：
扫一扫，手机访问

摘要：bootstrap选项卡使用方法解析

选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容 Bootstrap框架中的选项卡主要有两部分内容组成： [b]选项卡组件[/b]（也就是菜单组件），对应的是 Bootstrap的 nav-tabs）底部可以切换的[b]选项卡面板[/b]，在 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>

[b]选项卡–选项卡的结构 [/b] 一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。关键一点，选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。对于面板内容tab-pane都是隐藏的，只有当前面板内容才是显示的： css源码：

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

[b]选项卡–触发切换效果 [/b] 选项卡也定义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 的值匹配。 [b]选项卡–为选择卡添加fade样式 [/b] 为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 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>

[b]选项卡–胶囊式选项卡（nav-pills） [/b] 在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>

[b]选项卡–JavaScript触发方法 [/b] 在每个链接的单击事件中调用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>

下文[url=http://www.1sucai.cn/article/102680.htm]点击[/url]查看如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附3个精彩的专题： [url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] [url=http://www.1sucai.cn/Special/904.htm]Bootstrap Table使用教程[/url] [url=http://www.1sucai.cn/Special/854.htm]Bootstrap插件使用教程[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：JavaScript实现列出数组中最长的连续数
下一篇：JS中innerHTML和pasteHTML的区别实例分析

资讯排行榜
更多>>