菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap JS 选项卡


JS 选项卡 (tab.js)

选项卡用于将内容分成不同的窗格,每次只能查看一个窗格。

要了解关于选项卡的教程,请阅读我们的 Bootstrap 选项卡/胶囊教程


选项卡插件类

描述 示例
.nav nav-tabs 创建导航标签页 试一试
.nav-justified 使导航选项卡/胶囊在屏幕宽度大于 768px 时与父容器宽度相等。在较小的屏幕上,导航选项卡堆叠显示。 试一试
.tab-content 与 .tab-pane 和 data-toggle="tab" 一起使用,使其具有切换功能。 试一试
.tab-pane 与 .tab-content 和 data-toggle="tab" 一起使用,使其具有切换功能。 试一试

通过 data-* 属性

在每个选项卡上添加 data-toggle="tab",并为每个选项卡添加一个具有唯一 ID 的 .tab-pane 类,然后将它们包装在 .tab-content 类中。

示例

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>一些内容。</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Menu 1 中的一些内容。</p>
  </div>
</div>
自己动手试一试 »


通过 JavaScript

使用以下命令手动启用:

示例

// 选择所有选项卡
$('.nav-tabs a').click(function(){
  $(this).tab('show');
})

// 按名称选择选项卡
$('.nav-tabs a[href="#home"]').tab('show')

// 选择第一个选项卡
$('.nav-tabs a:first').tab('show')

// 选择最后一个选项卡
$('.nav-tabs a:last').tab('show')

// 选择第四个选项卡(从零开始)
$('.nav-tabs li:eq(3) a').tab('show')
自己动手试一试 »

选项卡选项

选项卡方法

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

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

选项卡事件

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

事件 描述 试一试
show.bs.tab 在选项卡即将显示时发生。 试一试
shown.bs.tab 选项卡完全显示后发生(在 CSS 过渡完成后) 试一试
hide.bs.tab 在选项卡即将隐藏时发生 试一试
hidden.bs.tab 选项卡完全隐藏后发生(在 CSS 过渡完成后) 试一试

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

示例

$('.nav-tabs a').on('shown.bs.tab', function(event){
  var x = $(event.target).text();         // 活动选项卡
  var y = $(event.relatedTarget).text();  // 上一个选项卡
});
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持