Question

在下面的示例中（取自here），就个别标签而言，幕后会发生什么？例如，它们是否在页面加载时根本不呈现，并且仅在选择选项卡时才创建/初始化为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>

谢谢！

Answer 1

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

Twitter Bootstrap html标签如何工作？

1 个答案: