jQuery / javaScript / CSS를 사용하여 요청 된 이름의 앵커 표시를 구현하는 방법

Question

이 페이지에는 여러 컨텐츠 DIV가있는 컨테이너 DIV가 있습니다. 각 콘텐츠 DIV에는 이름이 지정된 앵커가 있습니다. 한 번에 컨텐츠 div 중 하나만 표시됩니다.

예시:

<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>

원하는 동작은 누군가가 URL에 유효한 이름이 지정된 앵커를 사용하여 페이지를 요청하면 JavaScript / JQuery가이를보고 다양한 디스플레이 속성을 적절하게 설정하여 이름이 지정된 앵커에 해당하는 컨텐츠가 표시되도록합니다.

1. jQuery에 요청 URL을 사용할 수 있습니까?
2. URL에서 명명 된 앵커를 확인하면 일반적으로 $ (Document). Ready? ()에서 초기에 수행됩니다.
3. 크로스 브라우저 방식으로 바로 잡기가 어렵습니까?
4. URL에서 앵커를 추출하기위한 라이브러리 루틴이 있습니까, 아니면 모두가 자신의 정규 표현을 굴립니다.

Answer 1

당신이 사용할 수있는 location.hash URL에서 앵커를 검색합니다. 이것은 브라우저에서 작동하며 작동합니다 $(document).ready.

예를 들어:

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