При ссылке на якорь страницы, как мне вызвать там JS-код?
На моем веб-сайте есть страница часто задаваемых вопросов, которая по умолчанию показывает только вопросы, а не ответы, чтобы избежать беспорядка (могут быть лучшие способы, не стесняйтесь вносить предложения).
Чтобы увидеть ответ, пользователь должен щелкнуть по вопросу, который затем откроет ответ. Это делается на стороне браузера с помощью Javascript и jQuery, например:
<script type = "text/javascript" >
$(document).ready(function(){
$(".trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("fast");
});
});
</script>
Вопросы объявляются с помощью CSS-класса «триггер».
Теперь я ссылаюсь на вопросы часто задаваемых вопросов с других страниц, используя якоря. Это прокрутит страницу до вопроса, но не покажет ответ автоматически.
Мне нравится раскрывать ответ, когда пользователь нажимает на закрепленную ссылку на вопрос часто задаваемых вопросов.
Как я могу это сделать? Желательно без серверного (php) кода, но если надо, то могу и так.
Вот пример ссылки на мою страницу:
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если вы хотите показать ответ, вы можете добавить параметр строки запроса, который ваш support.php проверяет при загрузке страницы. Если есть такой параметр, найдите идентификатор в URL-адресе и вызовите любую функцию, которая может показать ответ.
Например, ссылка на
http://apps.tempel.org/FindAnyFile/support.php?showanswer=true#catsearch
а затем при загрузке страницы:
const urlParams = new URLSearchParams(window.location.search);
const showAnswer = urlParams.has('showanswer');
if (showAnswer) {
$('#' + window.hash).toggleClass("active").next().slideToggle("fast");
}
Конечно, вы можете поставить любое значение там. Ваш скрипт уже запущен при загрузке страницы — просто поместите его в свой обработчикready
Я имею в виду отсутствие значения, например "?showanswer#anchor". Для загрузки страницы вы имеете в виду событие .load()?
Неважно? Возможно, но иногда не отличная идея. Если вы это сделаете, используйте .has вместо .get
Вы уже используете $(document).ready(function(){, но в данном случае он вам даже не нужен, так как jQuery все равно определен вверху.
Чтобы обрабатывать ссылки на анкоры на той же странице, если вы хотите, чтобы они также отображались сразу, создайте функцию, которая при вызове с идентификатором выбирает этот элемент и вызывает toggleClass и тому подобное. Затем вы можете вызывать эту функцию при загрузке страницы с помощью window.hash, а также вызывать ее, когда срабатывает событие хэшчейн.
Вы можете проверить в javascript после загрузки страницы, есть ли у URL-адреса цель привязки, и если да, найдите свой якорь, имитируя щелчок. Если вы знаете, что хотите сделать, может быть более прямой подход к его открытию, а не к отправке щелчка.
Я вижу, что вы включили jQuery и уже имеете .ready, поэтому я бы добавил к нему это:
$(document).ready(function() {
if (window.location.hash != '') {
$(window.location.hash).click();
}
})
Да, это не работает, если ссылка находится на той же странице, что и якорь, например. когда у меня есть <a href = "#anchor>same page link</a>, вероятно, потому, что ready() не вызывается, верно? Есть идеи, как решить и это?
Делает ли это добавление эквивалентной проверки загрузки окна? (Не уверен, что в некоторых случаях это срабатывает дважды) $(window).load(function() { if (window.location.hash != '') { $(window.location.hash).click(); } }) Я смотрел на этот ответ: stackoverflow.com/a/12403504/2149955
Решено: добавьте $('a[href^ = "\\#"]').click(function() { $(this.hash).addClass("active").next().slideDown("fast"); }); к событию ready(). См. stackoverflow.com/a/8683147/43615
Мне бы не понадобилось "=true", так как я мог бы просто проверить наличие аргументов, верно? Кроме того, мой код в настоящее время не использует pageLoad. Надо разобраться.