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 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
Javascript模块化编程详解
Dec 01 Javascript
javascript事件模型介绍
May 31 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
React服务端渲染原理解析与实践
Mar 04 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
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
php判断访问IP的方法
2015/06/19 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
28个JS验证函数收集
2010/03/02 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
简单实现python进度条脚本
2017/12/18 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
竞选部长演讲稿
2014/04/26 职场文书
竞聘上岗演讲
2014/05/19 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
2015年检验科工作总结
2015/04/27 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang