![](/img/trans.png)
[英]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.