href 위의 부트 스트랩 탐색 탭이 동일한 페이지에서 활성화되지 않음

Question

여기에서 psulek의 솔루션을 구현했습니다 : Twitter Bootstrap - Tabs - URL doesn't change 모든 사이트 페이지의 오른쪽 탐색 섹션을 탐색 탭이있는 페이지로 이동하여 선택한 탭을 열 수 있습니다. 지역 검색 링크를 클릭하면 아래의 index.html을로 이동하고 선택 /는 # 지역 양식

<p><a href="index.html#airport-form" >Airport Search</a></p> 
    <p><a href="index.html#postcode-form">Postcode Search</a></p> 
    <p><a href="index.html#region-form">Region Search</a></p> 

이것은 탭 자체 인 index.html 페이지를 제외하고 잘 작동을 엽니 다. 이 페이지에는 위와 같은 링크가있는 오른쪽 탐색 섹션도 있습니다. 공항 검색 탭이 활성화되어 있고 지역 검색 링크를 클릭하면 URL이 /index.html#region-form으로 변경되지만 지역 탭은 활성화되지 않습니다. 페이지를 수동으로 새로 고침/다시로드하면 지역 탭이 활성화됩니다.

어떻게하면 index.html의 rh href 링크가 자동으로 '작업'하고 활성화 할 수 있습니까? 예 : 링크를 클릭 할 때 index.html의 페이지를 다시로드하려고하지만 가장 좋은 방법은 없을 것이라고 생각합니다.

Answer 1

다음은 nav-pills 및 nav-tabs와 함께 작동하는 일반화 된 예입니다. 링크를 사용하여 "페이지 내"탐색을 위해 탭을 제어 할 수 있습니다.

HTML

<a href="#aaa" class="control-tabs">Another Link a</a> 
<a href="#bbb" class="control-tabs">Another Link b</a> 
<ul class="nav nav-tabs"> 
    <li><a href="#aaa" data-toggle="tab">AAA</a></li> 
    <li><a href="#bbb" data-toggle="tab">BBB</a></li> 
    <li><a href="#ccc" data-toggle="tab">CCC</a></li> 
</ul> 
<div class="tab-content" id="tabs"> 
    <div class="tab-pane" id="aaa">...Content...</div> 
    <div class="tab-pane" id="bbb">...Content...</div> 
    <div class="tab-pane" id="ccc">...Content...</div> 
</div> 

JS

 // Javascript to enable link to tab 
     var url = document.location.toString(); 
     console.log('url',url); 
     if (url.match('#')) { 
      var tid = url.split('#')[1]; 
      console.log('tid',tid); 
      $('.nav a[href$=#'+tid+']').tab('show') ; 
      window.scrollTo(0, 0); 
     } 

     // Change hash for page-reload 
     $('.nav a').on('shown.bs.tab', function (e) { 
      window.location.hash = e.target.hash; 
      window.scrollTo(0, 0); 
     }) 

     // other links to control tabs 
     $(".control-tabs").click(function(){ 
      var url = $(this).attr('href'); 
      console.log('url',url); 
      if (url.match('#')) { 
       var tid = url.split('#')[1]; 
       console.log('tid',tid); 
       $('.nav a[href$=#'+tid+']').tab('show') ; 
       window.scrollTo(0, 0); 
      } 
     }); 

의