jQuery 탭 - 탭에 직접 연결

Question

웹 사이트에 jQuery 탭이 몇 개 있으며 직접 탭에 연결할 수 있도록 탭을 만들려고합니다.

사용자가 탭 앵커를 포함하는 URL을 입력하면 페이지가로드 될 때 먼저 해당 탭이 표시되어야합니다.

원래 jQuery 코드는 http://jqueryfordesigners.com/jquery-tabs/에서 가져 왔으며이 기능을 포함하지 않았습니다.

$(function() { 
    var tabContainers = $('div.tabs > div'); 

    $('div.tabs ul.tabNavigation a').click(function() { 
     tabContainers.hide().filter(this.hash).show(); 

     $('div.tabs ul.tabNavigation a').removeClass('selected'); 
     $(this).addClass('selected'); 

     return false; 
    }).filter(':first').click(); 
}); 

나는이에 코드를 수정했습니다 : 여기에 원래 코드 작품의

$(function() { 
    var tabs = []; 
    var tabContainers = $('div.tabs > div'); 
    $('div.tabs ul.tabNavigation a').each(function() { 
     if (this.pathname == window.location.pathname) { 
      tabs.push(this); 
      tabContainers.push($(this.hash).get(0)); 
     } 
    }); 

// sniff for hash in url, and create filter search 
var selected = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first'; 

$(tabs).click(function() { 
    // hide all tabs 
    $(tabContainers).hide().filter(this.hash).show();   
    // set up the selected class 
    $(tabs).removeClass('selected'); 
    $(this).addClass('selected');   
    return false; 
}).filter(selected).click(); 


}); 

이 종류 - 당신이 앵커가 URL에 포함되어있는 페이지에 링크 할 때, 당신을 제공합니다 그러나 관련 탭의 콘텐츠로 이동하고 다른 탭도 볼 수 있으며 다른 탭도 숨겨져 있지 않으며 탭도 선택되어 있지 않습니다.

당신이의 예를 볼 수 있습니다

초 탭, 기본적으로 표시 처음에 링크 없음 : http://74.54.17.66/~innovarc/improve/success-stories/financial-performance/

두 번째 탭에 직접 연결하려고 : http://74.54.17.66/~innovarc/improve/success-stories/financial-performance/#financial-performance

나는 시도 jQuery 코드에 어떤 문제가 있는지 알아 보려면 이해할 수 없다.

http://chrisvillanueva.com/stackoverflow/tabs.html#financial-performance 여기

내가 그것을 작동하게하는 방법은 다음과 같습니다 : 나는 해결책 내가 여기에 동작하는 예제를 작성하는 코드 (해시와 URL)를 편집

Answer 1

도움을 부탁드립니다

1) "div.tabs ul.tabNavigation a"click 이벤트 핸들러로 연결된 .filter() 및 .click() 메소드를 제거하십시오. 이러한 메서드는 항상 첫 번째 탭에서 포커스를받습니다.

2)이 같은 선택 탭 해시를 만들 :

var selectedTab = window.location.hash ? window.location.hash : '#cost-improvement'; 

"selectedTab는"우리는 탭 #ID 참조에 사용하는 값이 포함됩니다. 탭 마크 업)

//initalizes tab in url 
    $('div.tabs ul.tabNavigation li'+selectedTab+' a').addClass('selected'); 
    tabContainers.hide().filter($(''+selectedTab+'-tab')).show(); 

4 구문 각리스트 아이템 요소를 정의 :

는

3. ) 후 다음 라인을 요청 탭 초기화

<li id="financial-performance"><a href="#financial-performance-tab">Second</a></li> 

리튬을 는 고유 ID를 포함하고 앵커 요소는 관련 탭을 참조합니다. 이 같은

5) 설정하여 탭 패널 마크 업 : 당신은 내가 링크 된 페이지의 소스를 보면 물론

<div id="financial-performance-tab"> 
     <h2>Second</h2> 
     .... 

, 그것은 더 도움이됩니다. 그것은 당신에게 더 나은 상황을 줄 것입니다.

빠른 참고 : 유효한 URL 해시 값은 다음과 같습니다

• 비용 개선

• 금융 성능

• 변경 관리