2012-10-11 2 views
0

다음과 같은 jQuery 탭을 사용하고 있습니다. http://jqueryui.com/tabs/ 맨 위에 한 줄의 탭을 표시 할 수 있으며 HTML이이 섹션으로 분할되어 활성화됩니다.jQuery HTML href 탭

그러나 나는이 느낌에 완전히 만족하지 않습니다.

다양한 장소로 리디렉션되는 시스템 주위에 다양한 Href가 있기 때문에이 탭을 표시하는 페이지에 대한 링크로 연결할 수있는 방법이 있는지 아는 사람이 있는지 알고 싶습니다. 관련 탭을 URL 또는 다른 접근 방식에서?

예를 들어, div에 ID를 부여하고 해당 ID에 href을 입력하면 페이지가 그 지점까지 스크롤됩니다. 이것으로 당신이 가고자하는 페이지의 탭을 URL에 지정할 수 있습니다. jQuery와 결합한 후에는 불가능합니다.

+0

에서 온? – strmstn

+0

그 이유는 jQuery에 내장 된 것들을 사용하는 대신 내 자신의 탭을 작성하는 것입니다. –

+0

탭의 내용에 연결하는 것이 무엇입니까 ?? @strmstn –

답변

1

탭 만들기 우리의 모든 호출은 document.ready() 함수 내에서 발생합니다. 먼저 일반 jQuery UI 기술을 사용하여 탭을 만듭니다. 이 경우 div의 탭 ul 및 관련 div를 "탭 세트"클래스로 래핑했습니다.

$(".tab-set").tabs(); 

올바른 탭 다음에 새로운 방문자를 얻기, 우리는 우리가 특정 탭을로드 할 필요가 있는지 확인합니다. 우리는 현재 페이지에 "탭 설정"div가 있는지 확인하고 URL 끝에 해당 해시가 있는지 확인합니다. 양쪽 모두에 동의하면 scrollTo 플러그인을 사용하여 jQuery UI의 기본 동작을 사용하여 올바른 탭 내용을 표시하면서 탭을 계속 볼 수있는 "탭 세트"div로 점프합니다. 다시로드에서 페이지를 유지하면서 사용자가 페이지에 일단 탭 에 대한 북마크 된 URL을 생성

if($(".tab-set") && document.location.hash){ 
    $.scrollTo(".tab-set"); 
} 

, 우리는 주소 표시 줄에 URL을 업데이트 할 localScroll 플러그인을 사용합니다. 그 말씀을

$(".tab-set ul").localScroll({ 
    target:".tab-set", 
    duration:0, 
    hash:true 
}); 

은 "아니오 애니메이션을 수행하고 URL에 해시를 추가, 스크롤 사업부에 대신 링크 자체의 대상의 '탭이 설정 한'"입니다. 그게 전부 야! 모든 요구 사항이 충족되었습니다.

는 탭에 직접 연결이나 탭에 콘텐츠를 연결하는 의미합니까 How to Open A specific Tab from Link in jQuery

+0

변경 "$ .scrollTo (". tab-set ");" setTimeout ("$. scrollTo (". tab-set ")", 100); 렌더링에 약간의 시간이 걸리는 구식 IE 브라우저에서 작동하려면 scrollTo가 준비되지 않은 경우에는 작동하지 않지만 이전 Internet Explorer 브라우저를 사용하는 사람들을 위해 추가 지연이 추가됩니다. –