Bootstrap3实用教程
4.6.2 标签页插件的事件
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

下拉菜单

滚动监听

标签页

标签页插件的调用方式

标签页插件的事件

Bootstrap为标签页插件提供了 4 个事件,当显示一个新的tab时,按以下顺序依次触发这些事件:

  1. hide.bs.tab:在当前活动的tab上触发
  2. show.bs.tab:在将要隐藏的tab上触发
  3. hidden.bs.tab:上一个活动的tab上触发,跟触发hide.bs.tab事件的是同一个tab
  4. shown.bs.tab:在新激活也就是刚刚显示的tab上触发,跟触发show.bs.tab事件的是同一个tab

如果没有已经被激活的tab,则不会触发hide.bs.tab和hidden.bs.tab事件。这些事件的具体含义见表 4‑4。

表 4‑4 tab插件的事件及含义
事件 含义
hide.bs.tab 上一个tab隐藏之后,当前tab显示之前,触发该事件。
show.bs.tab 当前tab显示之后,上一个tab隐藏之前,触发该事件。
hidden.bs.tab 上一个tab已经隐藏,且当前tab也已经显示之后,触发该事件。
shown.bs.tab 当前tab已经显示之后,触发该事件。

所有的这些事件,都可以通过 event.target 和 event.relatedTarget 分别获取当前活动的标签页和上一次活动的标签页(如果有的话)。

如果开发人员希望自定义标签页插件的功能,就可以监听这些事件,并通过JavaScript编程来执行特定的操作。如,以下是监听 shown.bs.tab 事件的例子:

<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target          // 当前活动的标签页
  e.relatedTarget   // 上一次活动的标签页
})
</script>

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验