탐색 모음

Question

확인, 메신저 사용 JQuery와 (가장자리) 버전에 표시하고, 2.0 부트 스트랩, 나는이 코드 나던 데이터 토글 = "탭"2.0 탭 부트 스트랩 :

<div id="leftcol"> 
    <div id="ppl" class="tabbable tabs-left"> 
     <ul id="tabppl"> 
     <li class="active"><a class="bl" href="#1" data-target="#1" data-toggle="tab"> 1<span class="arroright"> </span></a> </li> 
     <li><a class="bl" href="#2" data-target="#2" data-toggle="tab"> 2<span class="arroright"> </span></a> </li> 
     <li><a class="bl" href="#3" data-target="#3" data-toggle="tab"> 3 <span class="arroright"> </span></a> </li> 
     <li><a class="bl" href="#4" data-target="#4" data-toggle="tab"> 4<span class="arroright"> </span></a> </li> 
     <li><a class="bl" href="#5" data-target="#5" data-toggle="tab"> 5<span class="arroright"> </span></a></li> 
     <li><a class="bl" href="#6" data-target="#6" data-toggle="tab"> 6<span class="arroright"> </span></a> </li> 
     <li><a class="bl" href="#7" data-target="#7" data-toggle="tab"> 7 <span class="arroright"> </span></a></li> 
     <li><a class="bl" href="#8" data-target="#8" data-toggle="tab"> 8<span class="arroright"> </span></a> </li> 
     <li><a class="bl" href="#9" data-target="#9" data-toggle="tab">9 <span class="arroright"> </span></a> </li> 
     </ul> 
    </div><!-- ppl--> 
</div><!--leftcol--> 

내가 이론을 알고를 , 그리고이 간단한 코드는 "data-toggle ="tab "을 각 태그에 넣을 때만 작동하지만 탐색 막대에 #Direction이 나타나지 않으면 URL이 변경됩니다. http://twitter.github.com/bootstrap/javascript.html#tabs은 설명하지 않습니다. 이것은 nav와 같지만 탭이 있습니다. 이 모든 정보가 탐색 모음에 표시되어야합니다. 마찬가지로 http://Your-url.com/#yourtabclicked

Answer 1

나는 뭔가를 발견했습니다. 그것은 모든 URL을 #ID 포인터로 작업하게합니다. 그냥이 추가 :

$(function() { 
    var activeTab = $('[href=' + location.hash + ']'); 
    activeTab && activeTab.tab('show'); 
}); 

그리고이 다른 코드를 탭의 탐색 모음에서 오픈하여 표시 당신이 그것을 클릭 할 때 : 대부분의 코드

$('.nav a').on('shown', function (e) { 
    window.location.hash = e.target.hash; 
}) 

이 웹 사이트의 다른 부분에서 발견되었다.

참고 : 가장 최신 JQuery (실제 1.7.1 버전)가 필요합니다.

Answer 2

탭에는 기본적으로 e.preventDefault가 설정되어 있습니다.

$(function() { 
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
     e.preventDefault() 
     $(this).tab('show') 
    }) 
    }) 

다음과 같은 방법으로 기본값을 해제하려고 할 수 있습니다 : 예를 들어

$('body').off('click.tab.data-api'); 

합니다.

$(function() { 

    $('body').off('click.tab.data-api'); 

    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
     //notice the e.preventDefault() is missing now 
     $(this).tab('show'); 
    }) 
    }) 

테스트하지 않았지만 제대로 작동해야합니다.