JQuery/JavaScript/CSS를 사용하여 요청 된 명명 된 앵커를 표시하는 방법을 구현하는 방법

Question

페이지에 여러 div가있는 컨테이너 div가 있습니다. 각 콘텐츠 div에는 명명 된 앵커가 있습니다.

이

예 : 누군가가 URL에 유효한 지정된 앵커를 사용하여 페이지를 요청하면

<style> 
    .lurk { display: none; } 
</style> 
<div class="container"> 
    <div id="c1"> 
    <a name="#c1">One</a> is the loneliest number. 
    </div> 
    <div id="c2" class="lurk"> 
    <a name="#c2">Two</a> is company. 
    </div> 
    <div id="c3" class="lurk"> 
    <a name="#c3">Three</a> is a crowd. 
    </div> 
</div> 
<script> 
// ... something that adds and removes the lurk class from the content divs 
</script> 

원하는 동작은, 자바 스크립트/JQuery와 볼 수 있는지 만 콘텐츠 된 div 중 하나는 한 번에 표시됩니다 명명 된 앵커에 해당하는 내용이 표시 될 수 있도록 다양한 표시 속성을 적절하게 설정합니다.

1. 요청 URL을 JQuery에서 사용할 수 있습니까?
2. URL에 이름 앵커 확인되어 보통 을 수행 초기 $ (문서) .ready에?()
3. 이 바로 크로스 브라우저 방식으로 얻을이 하드 인가?
4. URL에서 앵커를 추출하는 라이브러리 루틴이 있습니까? 아니면 모두가 자신의 정규 표현식을 굴릴 수 있습니까?

Answer 1

location.hash을 사용하면 URL에서 앵커를 검색 할 수 있습니다. 이 기능은 브라우저에서 작동하며 $(document).ready에서 작동합니다. 예를 들어

:

$("div.container > div").removeClass("lurk"); 
if (location.hash) 
    $("#" + location.hash).addClass("lurk");