은 3 단계로 위치 해시

Question

내가 탭의 구조를 가지고의 탭을 클릭합니다 :

<!-- Nav tabs - First level --> 
<ul class="nav nav-tabs" role="tablist"> 
    <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> 
</ul>  
<!-- Tab panes - First level --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="home">  
    <p>Home content.</p>  
    <!-- Nav tabs - Second level --> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li class="active"><a href="#home2" role="tab" data-toggle="tab">Home 2</a></li> 
     <li><a href="#profile2" role="tab" data-toggle="tab">Profile 2</a></li> 
    </ul>  
    <!-- Tab panes - Second level --> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="home2">   
     <p>Home 2 content.</p>    
     <!-- Nav tabs - Third level --> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li class="active"><a href="#home3-1" role="tab" data-toggle="tab">Home 3-1</a></li> 
     <li><a href="#profile3-1" role="tab" data-toggle="tab">Profile 3-1</a></li> 
    </ul>  
    <!-- Tab panes - Third level --> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="home3-1"><p>Home 3-1 content.</p></div> 
     <div class="tab-pane" id="profile3-1"><p>Profile 3-1 content.</p></div> 
    </div>   
     </div> 
     <div class="tab-pane" id="profile2"> 
     <p>Profile 2 content.</p>   
     <!-- Nav tabs - Third level --> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li class="active"><a href="#home3-2" role="tab" data-toggle="tab">Home 3-2</a></li> 
     <li><a href="#profile3-2" role="tab" data-toggle="tab">Profile 3-2</a></li> 
    </ul> 
     <!-- Tab panes - Third level --> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="home3-2"><p>Home 3-2 content.</p></div> 
     <div class="tab-pane" id="profile3-2"><p>Profile 3-2 content.</p></div> 
    </div>   
     </div> 
    </div>   
    </div> 
    <div class="tab-pane" id="profile">Profile content.</div> 
</div> 

이 코드는 여기에서 확인할 수있다 : (http://jsfiddle.net/bvta2/3/).

http://fiddle.jshell.net/bvta2/3/show/#profile3-1 링크에 액세스하면 프로필 3-1 탭이 활성 상태로 나타납니다. 그러나 예를 들어 http://fiddle.jshell.net/bvta2/3/show/#home3-2에 액세스하면 홈 3-2 탭이 활성화되지 않습니다.

jQuery를 사용하여 어떻게 해결할 수 있습니까? 감사!

Answer 1

#home3-2이 (가) 숨겨진 탭 내에 중첩되어 있기 때문입니다.

이 다음과 같은 코드를 무슨 일이 일어날 지?

<div> 1 
    <div style="display:none"> 2 
     <div style="display:block"> 3 </div> 
    </div> 
</div> 

당신이 아래 볼 DIV, 그것은 여전히 ​​부모에 의해 숨겨집니다 만든 비록입니다 보는 또 다른 방법.

페이지를로드 할 때 숨겨진 상위 탭에 대해 dom을 탐색하고 show을 호출해야합니다.

if (location.hash) { 
    $('a[href=' + location.hash + ']').tab('show'); 
    // code to also show parent tabs 
} 

당신은 다음과 같은 것을 할 수있는 : 바이올린에

//get the hashed element and find all of it's parent tabs that aren't active 
$(location.hash).parents('.tab-pane:not(.active)').each(function() { 
    //each pane should have an id - find it's anchor target and call show 
    $('a[href=#' + this.id + ']').tab('show'); 
}); 

데모 :

http://jsfiddle.net/KyleMit/bvta2/11/show/#home3-2