3

在以下示例中（取自此处），就各个选项卡而言，幕后发生了什么？例如，它们是否在页面加载时根本不呈现，并且仅在选择选项卡时被创建/初始化为 DOM 对象？还是它们都是从页面加载中呈现的，但在被选中之前是隐藏的或不可见的？

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

谢谢！

4

1 回答 1

2

这些是引导选项卡。它们都在页面加载时呈现和可见。在它们被渲染后，如果您包含来自 Bootstrap (bootstrap-tab.js) 的正确 JavaScript 文件，则会将一些事件附加到它们。然后，这些事件会处理单击选项卡时发生的情况、默认样式:active以及:hover在 Bootstrap CSS 文件中设置的状态。您可以在您在问题中提供的链接中找到如何实现它的示例 - 以及如何在单击选项卡时添加您自己的功能的示例。

于 2013-05-07T02:10:21.467 回答