На веб-сайте, который я разрабатываю, есть список ссылок в нижнем колонтитуле на каждой странице. К этим ссылкам добавляются якоря, например:
<ul>
<li class="lines exp"><a href="services.html#sa">Service A</a></li>
<li class="lines exp"><a href="services.html#sb">Service B</a></li>
<li class="lines exp"><a href="services.html#sc">Service C</a></li>
</ul>
На целевой странице «services.html» для этих ссылок есть ряд переключаемых элементов div, каждый из которых соответствует приведенным выше привязанным ссылкам, например:
<div id="sa" class="toggle-trigger">
<h3 class="services-title">
<a class="toggle-text">Service A</a>
</h3>
</div>
<div class="toggle-container">
<p>Lorem ipsum sit dolorem.</p>
</div>
<div id="sb" class="toggle-trigger">
<h3 class="services-title">
<a class="toggle-text">Service B</a>
</h3>
</div>
<div class="toggle-container">
<p>Lorem ipsum sit dolorem.</p>
</div>
<div id="sc" class="toggle-trigger">
<h3 class="services-title">
<a class="toggle-text">Service C</a>
</h3>
</div>
<div class="toggle-container">
<p>Lorem ipsum sit dolorem.</p>
</div>
Конечная цель состоит в том, чтобы ссылки нижнего колонтитула активировали свой целевой div «toggle-trigger» с имитацией события щелчка, который будет переключать открытие связанного div «toggle-container» после загрузки страницы «services.html».
С этой целью я добавил следующий JavaScript/jQuery в «services.html» в конце тела, поскольку он должен срабатывать только после того, как страница будет готова:
<script type="text/javascript">
$( document ).ready(function() {
var target = document.URL;
var regex = /services\.html#[a-z]{2}$/;
var result = regex.exec(target);
console.log("Target / Regex / Result: " + target + " / " + regex + " / " + result);
if (result) {
var divID = /#[a-z]{2}/.exec(result);
console.log("divID: " + divID[0]);
$(divID[0]).delay(1000).trigger('click');
}
});
$(".exp").click(function() {
var target = window.location.hash;
console.log("Target: " + target);
$(target).delay(1000).trigger('click');
});
</script>
Я добавил вторую функцию, поскольку переменная result
в первой функции всегда равна нулю при переходе по привязанным ссылкам на одной странице.
В настоящее время это работает именно так, как я хочу, когда щелкаю ссылку нижнего колонтитула на других страницах сайта. Однако, когда я уже нахожусь на странице «services.html» и нажимаю одну из ссылок нижнего колонтитула на той же странице, она не работает при первом нажатии, а вместо этого работает при втором нажатии привязанной ссылки.
Конечно, желательно, чтобы он работал одинаково, независимо от страницы, на которой щелкнули ссылку нижнего колонтитула.
Что я делаю неправильно?
$(document).ready(function(){});
псевдоним$(function(){});
делает именно то, что вам нужно: он запускает функцию после завершения загрузки структуры HTML. Больше нет необходимости помещать его в конец тела. - person Kiruse   schedule 20.09.2013target
не заполняется при самом первом щелчке. При всех последующих кликах он заполняется. Я пока не понимаю, почему это так. - person Enzan   schedule 20.09.2013target
при первом щелчке, как ожидалось. - person Enzan   schedule 20.09.2013