2012-08-01 2 views
18

navbar (다른 페이지로 연결되도록 설계된 것)는 탐색 탭 세트처럼 작동합니다 (동일한 페이지에 머물러 있고 원하는 섹션)?트위터 부트 스트랩 navbar가 탭처럼 작동하도록 만들기

실제로 내 탐색 바는 내가 원하는대로 작동하지만 다른 것들을 위해 필요한 $(".nav-tabs").button()을 호출하지 않는 경우에만 작동합니다. 이제 붕괴/언 콜라 싱이 발생하지 않습니다.

여기에 (꽤 보일러 판이다) 코드입니다 :

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

답변

10

내가 탭 같은 탐색 링크를 배선에 명백한 문제가 표시되지 않습니다.

네비게이션 스타일을 오버라이드하지 않도록 탭 클래스를 생략하고, 필요하면 data- 속성을 잊어 버리면됩니다.

그런 다음 docs에 지정된 JavaScript 활성화 (또는 data-toggle="tab" 속성 사용)를 사용해야합니다.

모든 것이 작동해야합니다.

편집는 : 후세를 위해, 당신은 bootstrap-tab.js 또는 bootstrap.js의 ONE (또는 축소 된 버전)를 포함해야합니까 및 관련 CSS를 너무 파일.

+0

nav-tabs.button을 추가 한 후에는 더 이상 존재하지 않습니다. 코드 샘플을 게시했습니다. –

+0

당신은 절대적으로 옳았습니다. 일단 nav-tabs가 필요로하는 부트 스트랩 파일을 포함 시키면 모두 잘 돌아 왔습니다. 감사! –

+0

이것은 가장 도움이되었지만 정상적인 ul 탐색 표시 줄과 navbar-right가있는 경우 두 섹션 모두 "활성"항목으로 끝납니다. –