How do Twitter Bootstrap html tabs work?

Question

In the following example (taken from here), what goes on behind the scenes as far as individual tabs go? For example, are they not rendered at all on page load and are only created/initialized as DOM objects when the tab is selected? Or are they all rendered from page load, but hidden or invisible until selected?

<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>

Thanks!

Answer 1

These are Bootstrap tabs. They are all rendered and visible on page load. After they have been rendered, some events are attached to them if you include the right JavaScript file from Bootstrap (bootstrap-tab.js). These events then handle what happens when the tabs are clicked, styles for their default, :active and :hover states are set in the Bootstrap CSS files. You can find examples of how to implement it - and examples of how to add your own functionality when a tab is clicked - at the link you have provided in your question.