JS标签页

• 标签页

1. 基本实例

   <div>
   
     <!-- Nav tabs -->
     <ul class="nav nav-tabs">
       <li class="active"><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>
   
     <!-- Tab panes -->
     <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>
   
   </div>

   截图：
   

   点击不同的标签显示不同的内容
2. 淡入淡出：

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