JavaScript 앵커- 다른 HTML 페이지에서 ID에 대한 액세스

StackOverflow https://stackoverflow.com/questions/269566

  •  06-07-2019
  •  | 
  •  

문제

두 개의 HTML 페이지가 있습니다. 첫 번째 HTML에서 무언가를 클릭하면 두 번째 페이지로 이동합니다. 내가하고 싶은 것은 첫 번째 HTML에서 클릭 한 내용에 따라 텍스트를 표시하는 것입니다. 다른 텍스트는 다른 ID로 포장됩니다. 내가 쓴 방법은 다음과 같습니다.

<a href="secondpage.html#one"></a>
<a href="secondpage.html#two"></a>
<a href="secondpage.html#three"></a>

나는 두 가지를 볼 것으로 기대하고있다.

두 번째 페이지의 코드는 다음과 같습니다.

<ul id="menu" class="aaa">
    <li><a id="one" href="#">one</a></li>
    <li><a id="two" href="#">two</a></li>
    <li><a id="three" href="#">three</a></li>
</ul>

각 ID를 수정할 JS 파일이 있습니다.

$("one").observe('click', function() {
    $('Pic').writeAttribute('src',"picone.jpg");
    $('Bio').update("texthere!");
});

2와 3에 대해 동일합니다.

지금 당장 첫 페이지의 버튼을 클릭하면 클릭 한 버튼에 관계없이 항상 "One"의 텍스트와 그림이 표시됩니다.

그러나 클릭하면 "2"에 대한 그림과 텍스트를보고 싶습니다.

도움이 되었습니까?

해결책

당신이하고 싶은 것은 페이지가로드 될 때 앵커 클릭을 시뮬레이션하는 것입니다. jQuery를 사용하기 때문에 가장 간단한 접근 방식 (그러나 가장 잘 형태)은 다음과 같습니다.

$(window).observe('domready', function () {
    $(location.hash).click();
});

ondomready-event를 창에 첨부하십시오. id = one이있는 요소를 가져 오십시오 (jQuery는 '#one'이면 위치와 동일합니다.이 경우에는 매우 편리합니다).

$ (location.hash) .click ()을 교체해야 할 수도 있습니다. jQuery가 jQuery-Objects의 배열을 반환하는 경향이 있으므로 $ (location.hash) .get (0) .click () with

그러나 귀하의 경우 더 나은 솔루션은 수동으로 트리거 할 수있는 이벤트 핸들러를 갖는 것입니다. 따라서 발사 이벤트의 필요성을 우회하고, 앵커를 떨어 뜨리고, LI에 직접 클릭하는 것입니다.

또한, 콘텐츠를 동적으로 표시/숨기는 것만으로도 두 번째 페이지를로드하는 이유는 무엇입니까? 같은 페이지에서 수행하십시오 ...

다른 팁

#BlastuffBla는 ID가 아니라 위치 해시입니다. 다음을 사용하여 ACC를 사용할 수 있습니다.

self.document.location.hash

해시 만 원한다면 #hash를 반환합니다.

self.document.location.hash.substring(1)

도움이 되었기를 바랍니다

태그에는 ID가 없지만 URL의 앵커를 처리 할 이름이 없으므로 JS에서 관리하려면 여전히 ID가 필요합니다. 그래서 귀하의 목록은 다음과 같습니다.

<ul id="menu" class="aaa">
<li><a id="one" name="one" href="#">one</a></li>
<li><a id="two" name="two" href="#">two</a></li>
<li><a id="three" name="three" href="#">three</a></li></ul>

당신의 JavaScript는 정확해 보였습니다.

"다른 ID"라고 말할 때 두 번째 페이지에 앵커를 어떻게 설정하고 있습니까? 두 번째 페이지의 앵커는 다음과 같습니다.

<a name='one'></a>

두 번째 페이지에 표시하려는 텍스트 바로 위에이 내용을 올려 놓으십시오.

페이지를 ID "One"의 포지톤으로 스크롤 하시겠습니까? 아마도 페이지의 내용이 너무 작아서 스크롤 할 수 없습니다. 나는 때때로 브라우저가 ID로 표시된 요소를 캔버스 상단으로 이동할 수 없으며 거기에서 스크롤 된 것처럼 보입니다. 요소 뒤에 충분한 공간을 포함시켜 브라우저 상단에 스크롤 할 수 있도록하십시오.

도움이되기를 바랍니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top