Bootstrap每天必学之标签页(Tab)插件


Posted in Javascript onAugust 09, 2020

标签页(Tab)通过结合一些 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')
})

下面的实例演示了以不同的方式来激活各个标签页:

// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')
 
// 选取第一个标签页
$('#myTab a:first').tab('show') 
 
// 选取最后一个标签页
$('#myTab a:last').tab('show') 
 
// 选取第三个标签页(从 0 开始索引)
$('#myTab li:eq(2) a').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)插件中要用到的事件。这些事件可在函数中当钩子使用。

Bootstrap每天必学之标签页(Tab)插件

五、基础实例

1.标签页

标签页也就是通常所说的选项卡功能。

//基本用法
<ul class="nav nav-tabs">
 <li class="active">
 <a href="#html5"
 data-toggle="tab">HTML5</a>
 </li>
 <li>
 <a href="#bootstrap" data-toggle="tab">Bootstrap</a>
 </li>
 <li>
 <a href="#jquery" data-toggle="tab">jQuery</a>
 </li>
 <li>
 <a href="#extjs" data-toggle="tab">ExtJS</a>
 </li>
</ul>

<div class="tab-content" style="padding: 10px;">
 <div class="tab-pane active" id="html5">
 ...
 </div>
 <div class="tab-pane" id="bootstrap">
 ...
 </div>
 <div class="tab-pane" id="jquery">
 ...
 </div>
 <div class="tab-pane" id="extjs">
 ...
 </div>
</div>
//可以设置淡入淡出效果 fade,而 in 表示首选的内容默认显示

<div class="tab-pane fade in active" id="html5">
//也可以换成胶囊式

<ul class="nav nav-pills">
//data-target

使用 data-target 绑定或不绑定效果都是一样的

//使用 JavaScript,直接使用 tab 方法。

$('#nav a').on('click', function(e) {
 e.preventDefault();
 $(this).tab('show');
});

Bootstrap每天必学之标签页(Tab)插件

//事件,其他雷同

$('#nav a').on('show.bs.tab', function() {
 alert('调用 tab 时触发!');
});

$('#nav a').on('shown.bs.tab', function() {
 alert('显示完 tab 时触发!');
});

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

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

Javascript 相关文章推荐
Array.prototype 的泛型应用分析
Apr 30 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
element中的$confirm的使用
Apr 26 Javascript
js Proxy的原理详解
May 25 Javascript
Bootstrap按钮组件详解
Apr 26 #Javascript
Bootstrap每天必学之警告框插件
Apr 26 #Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 #Javascript
jQuery 中的 DOM 操作
Apr 26 #Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 #Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 #Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 #Javascript
You might like
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
php实现图片添加水印功能
2014/02/13 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
Python可变参数函数用法实例
2015/07/07 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
python tkinter控件布局项目实例
2019/11/04 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Python通过字典映射函数实现switch
2020/11/06 Python
低碳生活倡议书
2014/04/14 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
小学英语复习计划
2015/01/19 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
答谢酒会主持词
2015/07/02 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
Redis RDB技术底层原理详解
2021/09/04 Redis
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
详解SQL的窗口函数
2022/04/21 Oracle
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android