bootstrap选项卡使用方法解析

作者:小鱼儿_zhang 时间:2024-04-16 09:13:11 

选项卡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,选项卡
0
投稿

猜你喜欢

  • SQL实现Excel的10个常用功能的示例详解

    2024-01-17 18:11:36
  • python实现证件照换底功能

    2021-07-02 03:57:01
  • js删除所有的cookie的代码

    2024-05-02 17:29:59
  • 浅谈uniapp页面跳转的解决方案

    2023-08-23 01:45:51
  • Python安装whl文件过程图解

    2022-06-22 02:51:26
  • 详解vue-cli 本地开发mock数据使用方法

    2024-05-10 14:20:21
  • 操作设计要素

    2011-03-04 16:23:00
  • 第五章之BootStrap 栅格系统

    2024-05-05 09:14:46
  • PyTorch中的squeeze()和unsqueeze()解析与应用案例

    2022-09-22 23:04:49
  • 在asp中使用js的encodeURIComponent方法

    2012-11-30 20:05:53
  • python+tifffile之tiff文件读写方式

    2022-03-16 13:17:41
  • Django中的JWT身份验证的实现

    2022-10-28 23:01:54
  • python 调用有道api接口的方法

    2021-11-18 18:51:16
  • Python首次安装后运行报错(0xc000007b)的解决方法

    2023-12-15 12:33:49
  • Ubuntu下设置mysql自动备份

    2010-10-25 20:25:00
  • 图文详解go语言反射实现原理

    2024-02-08 05:01:31
  • Python正则表达式匹配ip地址实例

    2023-06-13 15:06:12
  • 在Django的URLconf中进行函数导入的方法

    2023-07-10 10:46:26
  • python爬虫之scrapy框架详解

    2023-08-23 13:16:52
  • 解决python通过cx_Oracle模块连接Oracle乱码的问题

    2023-04-30 23:25:45
  • asp之家 网络编程 m.aspxhome.com