2013-05-09 4 views
0

페이지로 이동하여 아코디언 js 구조의 세 가지 컨텐츠 컨테이너 중 하나에서 컨텐츠를 열 수 있기를 원합니다. 여기 URL이있는 onClick 이벤트를 트리거하십시오.

는 HTML입니다 :

<div id="navigation"> 
<div id="AccordionContainer" class="AccordionContainer"> 
      <div onclick="runAccordion(1); ContentHeight=1040;" id="reel"> 
       <div class="AccordionTitle" onselectstart="return false;">REEL</div> 
      </div> 
      <div id="Accordion1Content" class="AccordionContent"> 
       <div id="reelSpots"> 
        content 
       </div> 
      </div> 
      <div onclick="runAccordion(2); ContentHeight=1075;"> 
       <div class="AccordionTitle" onselectstart="return false;">ABOUT</div> 
      </div> 
      <div id="Accordion2Content" class="AccordionContent"> 
       content 
      </div> 
      <div onclick="runAccordion(3); ContentHeight=175;"> 
       <div class="AccordionTitle" onselectstart="return false;">CONTACT</div> 
      </div> 
      <div id="Accordion3Content" class="AccordionContent"> 
       content 
      </div> 
     </div> 
    </div> 

그리고 여기 내 자바 스크립트입니다 : 내가 URL 문자열에 #reel를 넣어 검색 할 수있다 싶네요

// JavaScript Document 

var ContentHeight = 200; 
var TimeToSlide = 250.0; 

var openAccordion = ''; 

function runAccordion(index) 
{ 
    var nID = "Accordion" + index + "Content"; 
    if(openAccordion == nID) 
    nID = ''; 

    setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" 
     + openAccordion + "','" + nID + "')", 33); 

    openAccordion = nID; 
} 

function animate(lastTick, timeLeft, closingId, openingId) 
{ 
    var curTick = new Date().getTime(); 
    var elapsedTicks = curTick - lastTick; 

    var opening = (openingId == '') ? null : document.getElementById(openingId); 
    var closing = (closingId == '') ? null : document.getElementById(closingId); 

    if(timeLeft <= elapsedTicks) 
    { 
    if(opening != null) 
     opening.style.height = ContentHeight + 'px'; 

    if(closing != null) 
    { 
     closing.style.display = 'none'; 
     closing.style.height = '0px'; 
    } 
    return; 
    } 

    timeLeft -= elapsedTicks; 
    var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight); 

    if(opening != null) 
    { 
    if(opening.style.display != 'block') 
     opening.style.display = 'block'; 
    opening.style.height = (ContentHeight - newClosedHeight) + 'px'; 
    } 

    if(closing != null) 
    closing.style.height = newClosedHeight + 'px'; 

    setTimeout("animate(" + curTick + "," + timeLeft + ",'" 
     + closingId + "','" + openingId + "')", 33); 
} 

에, Accordion1Content를 엽니 다.

답변

0

당신은 클릭 이벤트를 트리거하기 위해 URL 구문 분석과 함께, JQuery와의 pageready 기능을 사용할 수 있습니다 : 당신은뿐만 아니라 다른 페이지 이름에 대한 사례를 추가 할 수 http://mysite.com/?page=reel

$(function() { 
    var url = window.location.href; 
    var page = url.match(/page=([^\?]+)/)[1]; 
    if (page=="reel") { runAccordion(1); } 
}); 

: 처럼 당신의 URL 보이는 말.

+0

시작해 주셔서 감사합니다. 브라우저 콘솔에서 다음 오류가 발생합니다. 잡히지 않은 TypeError : Object [object Location]에 'match'메서드가 없습니다. –

+0

죄송합니다. window.location.href가 있어야합니다. 나는 나의 대답을 업데이트했다. – lubar

+0

완벽하게 고마워, 매력처럼 작동합니다! –

관련 문제