ITPub博客

首页 > 应用开发 > Javascript > Bootstrap Tab选项卡

Bootstrap Tab选项卡

原创 Javascript 作者:web全栈 时间:2020-09-28 17:08:24 0 删除 编辑

Tab选项卡 CSS 类

选项卡用于将内容分为不同的窗格,每个窗格一次可见。

下表总结了  Bootstrap Tab选项卡 CSS 类:

类名 描述 示例
.nav nav-tabs 创建导航选项卡 尝试一下
.nav nav-pills 创建一个药丸菜单 尝试一下
.nav-justified 对齐宽度相等的标签/药丸链接 尝试一下
.nav-link 用于在导航栏中设置链接/锚的样式 尝试一下
.nav-item 用于为导航栏中的列表项设置样式 尝试一下
.tab-content 与.tab-pane一起使用以创建可切换tab选项卡 尝试一下
.tab-pane 与.tab-content一起使用以创建可切换tab项 尝试一下

Tab选项卡方法

下表列出了所有可用的Tab选项卡方法。

方法 描述 示例
.tab("show") 显示tab 选项卡 尝试一下

Tab选项卡事件

下表列出了所有可用的Tab选项卡事件。

事件 描述 示例
show.bs.tab 在即将显示tab选项卡时发生 尝试一下
shown.bs.tab 在完全显示tab选项卡时发生(在CSS转换完成之后) 尝试一下
hide.bs.tab 在tab选项卡将被隐藏时发生 尝试一下
hidden.bs.tab 当tab选项卡完全隐藏时发生(在CSS转换完成之后)

提示 :使用 jQuery 的 event.target  和  event.relatedTarget  获取激活选项卡和上一个激活选项卡:

$('.nav-tabs a').on('shown.bs.tab', function(event){
    var x = $(event.target).text();        
    var y = $(event.relatedTarget).text(); 
});


相关页面

Bootstrap 导航

Bootstrap 导航栏

Bootstrap CSS类参考



来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69942367/viewspace-2724881/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-07-26

  • 博文量
    48
  • 访问量
    22414