Якорь JavaScript - доступ к идентификатору на другой HTML-странице

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

  •  06-07-2019
  •  | 
  •  

Вопрос

У меня есть две html-страницы, когда вы нажимаете на что-то в первом html, оно переходит ко второму. То, что я хочу сделать, это показать текст в соответствии с тем, что вы нажали на первый HTML. разные тексты оборачиваются разными идентификаторами. Вот как я написал: 

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

Я ожидаю, что two.html загрузит текст с идентификатором " one " ;, но он не работает, кто-нибудь знает, что я сделал не так?

Вот код на второй странице: 

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

И у меня есть файл JS для изменения каждого идентификатора: 

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

То же самое для двух и трех.

Прямо сейчас, если я нажму кнопку на первой странице, она всегда будет отображаться текст и изображение для "одного", независимо от того, какую кнопку я нажимаю.

Но я хочу увидеть изображение и текст для " два " если я нажму на него.

Это было полезно?

Решение

То, что вы хотите сделать, это симулировать щелчок на вашем якоре при загрузке страницы. Поскольку вы используете jQuery, самый простой подход (но далеко не лучший) будет следующим: 

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

прикрепить событие ondomready к окну. Извлечь элемент с id = one (с jQuery это будет '#one', как и ваш location.hash, что очень удобно в этом случае), вызвать щелчок по нему.

Возможно, вам придется заменить $ (location.hash) .click (); с $ (location.hash) .get (0) .click (), поскольку jQuery, как правило, возвращает массивы jQuery-объектов.

Но лучшим решением в вашем случае было бы иметь обработчик событий, который вы можете запускать вручную, таким образом, обойти необходимость запуска событий, а также сбросить якоря и надеть щелчок прямо на ваш li.

И, кроме того, почему вы загружаете вторую страницу, когда все, что вам нужно, это динамически отображать / скрывать контент? Сделайте это на той же странице ...

Другие советы

#blastuffbla - это не идентификатор, а хеш местоположения. Вы можете получить к нему доступ, используя: 

self.document.location.hash

который возвращает #hash, если вы хотите использовать только хеш, вы бы использовали: 

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

Надеюсь, это поможет

Теги

не имеют идентификаторов, но имеют имена для обработки якорей в URL-адресах, но вам все равно потребуется идентификатор для управления ими в JS. Итак, ваш список должен быть: 

<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 показался правильным.

Когда вы говорите "разные идентификаторы" как вы настраиваете свои якоря на 2-й странице? Якорь на 2-й странице должен выглядеть следующим образом: 

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

Поместите это прямо над текстом, который вы хотите отметить на 2-й странице.

Хотите прокрутить страницу до позиции идентификатора "один"? Возможно, содержимое страницы слишком мало, и вы не можете прокрутить его там. Я имею в виду, что иногда браузер не может переместить элемент, отмеченный идентификатором, в верхнюю часть холста и выглядит так, как будто он там не прокручивается. Попробуйте добавить достаточно места после элемента, чтобы его можно было прокручивать до верхней части браузера.

Надеюсь, это поможет.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top