[英]jQuery/JavaScript: Triggering a click function on same-page anchors
A website I'm developing has a list of links in the footer on every page. 我正在开发的网站的每个页面的页脚中都有链接列表。 These links are appended with anchors like so: 这些链接附加有锚点,如下所示:
<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>
On the "services.html" target page for these links, there is a series of toggle-style divs each corresponding to the above anchored links, like so: 在这些链接的“ 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>
The ultimate goal is to have the footer links activate their target "toggle-trigger" div with a simulated click event, which will toggle open the associated "toggle-container" div after loading the "services.html" page. 最终目标是使页脚链接通过模拟的click事件激活其目标“ toggle-trigger” div,该事件将在加载“ services.html”页面后切换打开关联的“ toggle-container” div。
To this end, I've added the following JavaScript / jQuery to "services.html" at the end of the body, since it should only fire once the page is ready: 为此,我在主体末尾的“ 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>
I added the second function since the result
variable in the first function is always null when clicking anchored links within the same page. 我添加了第二个函数,因为在单击同一页面内的锚定链接时,第一个函数中的result
变量始终为null。
Currently, this works exactly the way I want it to when clicking a footer link on other site pages. 当前,这与我在其他站点页面上的页脚链接单击时完全一样。 However, when I am already on the "services.html" page and click one of the footer links on the same page, it doesn't work the first time I click but instead works the second time the anchored link is clicked. 但是,当我已经在“ services.html”页面上并单击同一页面上的一个页脚链接时,第一次单击不起作用,但是第二次单击锚定链接时起作用。
Desired behavior is of course for it to work the same, regardless of the page on which the footer link is clicked. 当然,无论单击页脚链接的页面如何,所需的行为都可以使其发挥相同的作用。
What am I doing wrong? 我究竟做错了什么?
The way I see it... when you are already on the services.html page, something behaves badly. 我的查看方式...当您已经在services.html页面上时,就会表现不佳。 This could be the href="services.html#sa". 这可能是href =“ services.html#sa”。 Although I don't know what exactly could be wrong, I would recommend retrieving your "#anchor" differently. 尽管我不知道到底是什么问题,但我还是建议您以其他方式检索“ #anchor”。
Something like 就像是
$(".exp").click(function(){
$a = $(this).find("a").first() ;
href = $a.attr('href') ;
// parse the href to retrieve #anchor
}) ;
This way, you wouldn't depend on window.location... which may behave badly when you are already on services.html. 这样,您就不必依赖window.location ...了,如果您已经在services.html上,它可能会表现不佳。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.