Accordian의 반응 형 탭, URL에 사용자 정의 탭 ID를 추가 할 때 올바른 탭 표시

Question

"Easy Responsive Tabs Plugin by author : Samson.Onna"; 스크립트가 차례로 탭을 클릭 URL에 추가되는 각 탭에 ID를 할당 기본적으로 https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion/blob/master/js/easyResponsiveTabs.js

,이 또한 예를 들어,이 탭 3.

표시됩니다의 URL ( http://mysite.co.uk/#horizontalTab3)에서 참조 할 수있다

기본 해시 URL 대신 내 탭 맞춤 ID를 사용하기 위해이 설정을 조정하고 싶습니다. (/ # horizontalTab1)

이것은 아래 스크립트입니다. 그것은 수정되지 않은 그리고 내가 말할 수있는 것은 개정이 필요합니다 섹션는 ...에서

행동 아래

// Show correct content area 
var tabNum = 0; 
if(hash!='') { 
var matches = hash.match(new RegExp(respTabsId+"([0-9]+)")); 
if (matches!==null && matches.length===2) { 
    tabNum = parseInt(matches[1],10)-1; 
    if (tabNum > count) { 
     tabNum = 0; 
    } 
} 
} 

은 "클릭 탭 '해시 ... 저장 URL에 해시로 사용할 수

내가 한 것은 원래 스크립트를 약간 수정하는 것입니다. 이제는 각 탭에 부여한 ID를 사용합니다.
각 탭의 URL이 더 Google에 친숙하고 다음과 같이 보입니다 (http://mysite.co.uk/#tab-id). 원래 스크립트는 여전히 주석 처리 된 상태입니다.

//Update Browser History 
if(historyApi) { 
    var currentHash = window.location.hash; 

    //var newHash = respTabsId+(parseInt($tabAria.substring(9),10)+1).toString(); 
    var newHash = $respTabs.find('ul.tabs-list li.tab-active').attr('id'); 

    if (currentHash!="") { 

    //var re = new RegExp(respTabsId+"[0-9]+"); 
     var re = $respTabs.find('ul.tabs-list li.tab-active').attr('id'); 

     if (currentHash.match(re)!=null) {         
      newHash = currentHash.replace(re,newHash); 
     } 
     else { 
     //newHash = currentHash+"|"+newHash; 
      newHash = '#'+newHash; 
     } 
    } 
    else { 
     newHash = '#'+newHash; 
    } 

    history.replaceState(null,null,newHash); 
} 
}); 

그런 다음 내 HTML에서 나는 사전에이

<ul class="tabs-list"> 
     <li id="choose-your-package">CHOOSE YOUR PACKAGE <div class="active-arrow"></div></li> 
     <li id="chi-tour" class="demo-tab">CHI TOUR <div class="active-arrow"></div></li> 
     <li id="extras-and-addons">EXTRAS + ADDONS <div class="active-arrow"></div></li> 
     <li id="tech-specs">TECH SPECS <div class="active-arrow"></div></li> 
    </ul><!-- /.tabs-list --> 
    <div class="tabs-container"> 

     <div> <!-- Tab #1 --> 
      <?php include('_product-tabs--package.php'); ?> 
     </div><!--/Tab #1 --> 


     <div> <!-- Tab #2 --> 
      <?php include('_product-tabs--demo.php'); ?>     
     </div> <!--/Tab #2 --> 


     <div> <!-- Tab #3 --> 
      <?php include('_product-tabs--extras.php'); ?>      
     </div> <!--/Tab #3 --> 


     <div> <!-- Tab #4 --> 
      <?php include('_product-tabs--tech-specs.php'); ?>      
     </div> <!--/Tab #4 --> 

    </div><!-- /.tabs-container --> 

감사를!

Answer 1

이 문제가있는 다른 모든 사용자는 반응 형 탭의 하단에이 문제를 추가합니다. 이 수정 당신이 날 당신이 행한 그 밖의 무엇을 알려 주시기 바랍니다 수 있습니다, 당신의 코드를 사용하지만, 일이 주목할 시도