Làm cho thanh công cụ của Twitter Bootstrap hoạt động như các tab

Question

Có cách nào để tạo thanh điều hướng (có vẻ như được thiết kế để liên kết đến các trang khác) hoạt động giống như một tập hợp các tab điều hướng (nằm trên cùng một trang, ẩn tất cả) phần)?

Thực ra, thanh điều hướng của tôi hoạt động giống như tôi muốn, nhưng chỉ khi tôi không gọi $(".nav-tabs").button(), điều tôi cần cho những thứ khác. Bây giờ không ai trong số các sụp đổ/uncollapsing xảy ra.

Dưới đây là đoạn code (mà là khá nồi hơi-tấm):

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
    <div class="container"> 
    <div class="nav-collapse collapse"> 
    <ul id="tab" class="nav"> 
    <li class="active"><a href="#Tab1" data-toggle="tab">Tab1</a></li> 
    <li><a href="#Tab2" data-toggle="tab">Tab2</a></li> 
    <li><a href="#Tab3" data-toggle="tab">Tab3</a></li> 
    </ul> 
    <a class="brand" href="#">NavTab Demo</a> 
    </div> 
    </div> 
</div> 
</div> 
<div class="container-fluid"> 
<div class="row-fluid"> 
    <div class="span12"> 
    <div class="tab-content"> 
    <div class="tab-pane active" id="Tab1"> 
... 

Answer 1

Tôi không thấy bất kỳ vấn đề rõ ràng trong dây liên kết nav của bạn dưới dạng tab.

Bạn chỉ cần bỏ qua các lớp tab không ghi đè kiểu thanh điều hướng của mình và đừng quên thuộc tính data- (nếu cần).

Sau đó, bạn phải sử dụng kích hoạt JavaScript như được chỉ định trong docs (hoặc sử dụng thuộc tính data-toggle="tab").

Mọi thứ sẽ hoạt động.

Sửa: cho hậu thế, bạn không cần phải bao gồm ONE của bootstrap-tab.js hoặc bootstrap.js (hoặc phiên bản rút gọn) và file css liên quan đến quá.