bootstrap选项卡使用方法解析


Posted in Javascript onJanuary 11, 2017

选项卡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个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
jQuery 表格插件整理
Apr 27 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
Postman参数化实现过程及原理解析
Aug 13 Javascript
常用的javascript设计模式
Jan 11 #Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 #Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 #Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 #Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 #Javascript
理解javascript中的闭包
Jan 11 #Javascript
javascript常用经典算法详解
Jan 11 #Javascript
You might like
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
PHP 已经成熟
2006/12/04 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
跟老齐学Python之网站的结构
2014/10/24 Python
举例介绍Python中的25个隐藏特性
2015/03/30 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
python多进程使用函数封装实例
2020/05/02 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
值传递还是引用传递
2015/02/08 面试题
laravel使用redis队列实例讲解
2021/03/23 PHP
电子技术专业中专生的自我评价
2013/12/17 职场文书
老师自我鉴定范文
2013/12/25 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
Springboot中如何自动转JSON输出
2022/06/16 Java/Android