location.hash를 사용하여 요소 표시/숨기기

Question

5 개의 링크와 5 개의 div가있는 탐색 모음이 있습니다. 첫 번째 링크를 클릭하면 첫 번째 div가 표시되고 나머지는 display: none으로 설정됩니다. 나머지는 마찬가지입니다.

나는 방문자에게 이러한 동적 "페이지"(보이는 divs)를 책갈피로 남겨서 URL 해시를 사용하고 싶습니다. 하지만 예상대로 작동하지 않습니다. 예를 들어 특정 상태 (특정 div가 표시된 위치)로 직접 이동할 수는 없습니다. 명확하지 않은 경우 next 및 prev 방법을 사용하지 않아도 수행하려는 목표는 this video과 동일합니다.

다음은 내 코드 샘플입니다.

<style> 
    div { display:none; } 
    div#intro { display:block; } 
</style> 

<ul id="pages"> 
    <li><a href="#intro">First link</a></li> 
    <li><a href="#continue">Second link</a></li> 
    <li><a href="#end">Third link</a></li> 
</ul> 

<div id="intro"></div> 
<div id="continue"></div> 
<div id="end"></div>> 

<script> 
    function toggle() { 
     var i = 0, 
     divs = document.getElementsByTagName("div"), 
     hash = window.location.hash.substring(1); //extracts hash without # 

     for (i; i < divs.length ; i++) { 
      if (divs[i].id == hash) { 
       $(divs[i]).css("display", "block"); 
      } 
      else { 
       $(divs[i].css("display", "none"); 
      } 
     } 
    } 

    window.onhashchange = toggle; 
</script> 

Answer 1

Corections 옆으로 게시 된 코드에서, 당신은 페이지뿐만 아니라로드 될 때 toggle 함수를 호출 할 필요가있다. 당신이 jQuery를 사용하는 것처럼, 당신의 script 태그의 하단이 추가

$(document).ready(function() { 
    toggle(); 
}); 

과 같이 :

이

function toggle() { 
    var i = 0, 
    divs = document.getElementsByTagName("div"), 
    hash = window.location.hash.substring(1); //extracts hash without # 

    for (i; i < divs.length ; i++) { 
     if (divs[i].id === hash) { 
      $(divs[i]).css("display", "block"); 
     } 
     else { 
      $(divs[i]).css("display", "none"); 
     } 
    } 
} 

window.onhashchange = toggle; 

// triggers on first load of page 
$(document).ready(function() { 
    toggle(); 
}); 

Answer 2

문제는 window.onhashchange 모든 브라우저에서 지원되지 않는 것입니다. onhashchange을 지원하지 않는 일부 브라우저에서는 해시의 변경 사항을 폴링하도록 타이머를 설정해야 할 수 있습니다. 당신을 위해 그것을하는 도서관이있다 : crossroad, 너는 볼지도 모른다.

Answer 3

이 솔루션을 찾으려면 조금 힘들었지 만, 결국 가장 빠른 방법은 이벤트를 수동으로 실행하는 것임을 이해했습니다. here이 작동하는 것을 볼 수 있습니다.이 코드는 (요소를 스크롤하는 방법을 모르기 때문에 scrollTo 플러그인을 사용해야했습니다. 그러나 window.scroll으로 스크립트를 적용하거나 scrollTo 플러그인 자체를 약간 수정하면됩니다. (당신이 바로 element.top에 기간이 0으로 애니메이션을 할 수있는, 이해하기 쉽게) :

$(window).on("hashchange", function (e) { 
    var hash = location.hash, 
     divs = $('div'), 
     element = $(hash); 
    divs.hide(); 
    element.show(); 
    $(document.body).scrollTo(hash, { 
     duration: 0 
    }); 
}); 
$(document).ready(function() { 
    var hash = location.hash; 
    if (hash !== '') { 
     $(window).trigger('hashchange'); 
    } 
}); 

당신은 단지에 페이지를 다시로드 한 후 jsfiddle의 URL 후 /show/을 추가하고하여 직접 시도해 볼 수 있습니다 해시가 이미 설정되어 있습니다.