[英]jQuery + window.location.hash and same-page anchors - inconsistent behavior?
[英]jQuery/JavaScript: Triggering a click function on same-page anchors
我正在开发的网站的每个页面的页脚中都有链接列表。 这些链接附加有锚点,如下所示:
<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对应于上述锚定链接,如下所示:
<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>
最终目标是使页脚链接通过模拟的click事件激活其目标“ toggle-trigger” div,该事件将在加载“ services.html”页面后切换打开关联的“ toggle-container” div。
为此,我在主体末尾的“ services.html”中添加了以下JavaScript / jQuery,因为只有在页面准备好后才可以触发它:
<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
变量始终为null。
当前,这与我在其他站点页面上的页脚链接单击时完全一样。 但是,当我已经在“ services.html”页面上并单击同一页面上的一个页脚链接时,第一次单击不起作用,但是第二次单击锚定链接时起作用。
当然,无论单击页脚链接的页面如何,所需的行为都可以使其发挥相同的作用。
我究竟做错了什么?
我的查看方式...当您已经在services.html页面上时,就会表现不佳。 这可能是href =“ services.html#sa”。 尽管我不知道到底是什么问题,但我还是建议您以其他方式检索“ #anchor”。
就像是
$(".exp").click(function(){
$a = $(this).find("a").first() ;
href = $a.attr('href') ;
// parse the href to retrieve #anchor
}) ;
这样,您就不必依赖window.location ...了,如果您已经在services.html上,它可能会表现不佳。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.