锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / Bootstrap / Bootstrap标签页
服务方向
人工智能数据处理
人工智能培训
kaldi数据准备
小语种语音识别
语音识别标注
语音识别系统
语音识别转文字
kaldi开发技术服务
软件开发
运动控制卡上位机
机械加工软件
软件开发培训
Java 安卓移动开发
VC++
C#软件
汇编和破解
驱动开发
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883
微信:ryysoft

Bootstrap 标签页插件


通过结合一些 data 属性,您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。

如果您想要单独引用该插件的功能,那么您需要引用 tab.js。或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js


用法

您可以通过以下两种方式启用标签页:

  • 通过 data 属性:您需要添加 data-toggle=”tab” 或 data-toggle=”pill” 到锚文本链接中。
  • 添加 nav 和 nav-tabs 类到 ul 中,将会应用 Bootstrap 标签样式,添加 nav 和 nav-pills 类到 ul 中,将会应用 Bootstrap 胶囊式样式。
<ul class="nav nav-tabs">     
<li><a href="#identifier" data-toggle="tab">Home</a></li>  
...  
</ul>

通过 JavaScript:您可以使用 Javscript 来启用标签页,如下所示:

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

淡入淡出效果

如果需要为标签页设置淡入淡出效果,请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类,以便淡入显示初始内容,如下所示:

<div class="tab-content">    
<div class="tab-pane fade in active" id="home">...</div>    
<div class="tab-pane fade" id="svn">...</div>    
<div class="tab-pane fade" id="ios">...</div>    
<div class="tab-pane fade" id="java">...</div>  
</div>

方法

.$().tab:该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的href

<ul class="nav nav-tabs" id="myTab">    
<li class="active"><a href="#identifier" data-toggle="tab">Home</a></li>    
.....  
</ul>  
<div class="tab-content">    
<div class="tab-pane active" id="home">...</div>    
.....  
</div>  
<script>    
$(function () {      
$('#myTab a:last').tab('show')    
})  
</script>

事件

下表列出了标签页(Tab)插件中要用到的事件。这些事件可在函数中当钩子使用。

事件 描述 实例
show.bs.tab 该事件在标签页显示时触发,但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {    
e.target 
// 激活的标签页    
e.relatedTarget 
// 前一个激活的标签页  })
shown.bs.tab 该事件在标签页显示时触发,但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {    
e.target 
// 激活的标签页    
e.relatedTarget 
// 前一个激活的标签页  })
友情链接
版权所有 Copyright(c)2004-2021 锐英源软件
公司注册号:410105000449586 豫ICP备08007559号 最佳分辨率 1024*768
地址:郑州大学北校区院(文化路97号院)内