jQuery/JavaScript:触发同一页面锚点上的单击函数
jQuery/JavaScript:触发同一页面锚点上的单击函数
提问于 2013-09-19 12:07:16
我正在开发的一个网站在每个页面的页脚上都有一个链接列表。这些链接附加了如下所示的锚：
<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，这将在加载"services.html“页面后切换打开相关的”切换容器“div。
为此，我将以下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变量始终为null。
目前，这完全是我想要的方式，当单击其他网站页上的页脚链接。但是，当我已经在"services.html“页面上并单击同一页上的一个页脚链接时，它在第一次单击时不起作用，而是在第二次单击锚定链接时工作。
当然，无论在哪个页面上单击页脚链接，它的工作方式都是相同的。
我做错了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-09-19 12:16:27
在我看来..。当您已经在services.html页面上时，某些东西的行为会很糟糕。这可能是href="services.html#sa“。虽然我不知道到底是什么问题，但我建议以不同的方式检索“#锚”。
有点像
$(".exp").click(function(){
$a = $(this).find("a").first() ;
href = $a.attr('href') ;
// parse the href to retrieve #anchor
}) ;这样，你就不会依赖window.location.当您已经在services.html上时，这可能会表现得很糟糕。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18903962
复制相关文章
相似问题
通过javascript将div内容转换为图像
使用Javascript将div替换为图像
将DIV内容替换为DIV内容JavaScript (No jQuery)
纯javascript方法将内容包装在div中
将div的内容转换为图像
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
