jQuery를 사용하여 페이지로드시 아코디언 스타일의 격자를 열려면 어떻게해야합니까?

Question

나는 두 페이지를 가지고 - 볼 - 나는 아코디언 스타일의 격자를 가지고

페이지 A가 페이지 B에 페이지 B.

에가는 4 개 링크가

의 페이지 A와 페이지 B.를 부르 자 http://css-tricks.com/examples/InfoGrid/

나는 그것을

이 사람이 나를 도울 수

페이지 B.의 탭 중 하나를 엽니 페이지 A의 링크 중 하나를 클릭하면 그래서 그것을 얻으려고?! 건배. 당신은을 클릭 할 해당 페이지 A를

Answer 1

, 페이지 B에

<a href='pageB.html#sectionOne'> Section One </a> 
<a href='pageB.html#sectionTwo'> Section Two </a> 
<a href='pageB.html#sectionThree'> Section Three </a> 

다음 페이지 B. 각 아코디언 항목의 ID와 일치하는 해시 값을 각 링크를 제공, 각 아코디언 항목을 지정 위의 해시 값과 일치하는 ID입니다.

는 (그 중 하나는 현재 "선발"의 ID가있는 경우, 사용하려는 ID로 변경.)

<dt id="sectionOne" style="cursor: pointer; font-size: 14px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; "> 
    Section One 
</dt> 
... 
<dt id="sectionTwo" style="cursor: pointer; font-size: 14px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; "> 
    Section Two 
</dt> 
... 
<dt id="sectionThree" style="cursor: pointer; font-size: 14px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; "> 
    Section Three 
</dt> 

마지막으로, infogrid.js 파일에서이 줄을 교체 이와

$("#starter").trigger("click"); 

:

이

$(window.location.hash).trigger("click"); 

그것은을 얻을 것이다 해시 값을 가져 와서 적절한 아코디언 항목에서 클릭 이벤트를 트리거하는 데 사용하십시오.

---

는 편집 :@Tomas Lycken에서 언급 한 바와 같이

, 당신은 아마 몇 가지 기본을 원하지 않습니다. 제공된 #starter ID를 사용하거나 (해당 링크에서 해당 ID를 사용하거나) 직접 선택할 수 있습니다. 기본으로 #sectionOne을 원한다면

, 당신이 할 수 있습니다 : 하나, 또는 #sectionOne없는 경우가있는 경우

$((window.location.hash || '#sectionOne')).trigger("click"); 

이 해시 값을 사용합니다.

당신이 잘못된 해시 값에 대해 보호하려는 경우, 당신이 할 수 있습니다 :

var $viewAtPageLoad = $(window.location.hash).trigger("click"); 

if(!$viewAtPageLoad.length) { 
    $('#sectionOne').trigger("click"); 
);