jQuery切換和錨鏈接

我使用的是從Sohtanaka的jQuery切換效果，以便「顯示」和「隱藏」內容。jQuery切換和錨鏈接

這是jQuery的：

$(document).ready(function(){ 

//Hide (Collapse) the toggle containers on load 
$(".toggle_container").hide(); 

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state) 
$("h2.trigger").click(function(){ 
    $(this).toggleClass("active").next().slideToggle("slow"); 
    return false; //Prevent the browser jump to the link anchor 
}); 

});

，這是我的HTML：

<h2 class="trigger"><a href="#test1">Test 1</a></h2> 
<div class="toggle_container"> 
    <div class="block"> 
    <h3>Content Header</h3> 
    <p>content</p> 
    </div> 
</div> 

<h2 class="trigger"><a href="#test2">Test 2</a></h2> 
<div class="toggle_container"> 
    <div class="block"> 
    <h3>Content Header</h3> 
    <p>content</p> 
    </div> 
</div> 

<h2 class="trigger"><a href="#test3">Test 3</a></h2> 
<div class="toggle_container"> 
    <div class="block"> 
    <h3>Content Header</h3> 
    <p>content</p> 
    </div> 
</div>

一切正常。

我想知道什麼需要修改，以便當相應的錨點位於url的末尾時顯示特定的容器？

例如如果我的網址是「www.domain.com/content/#test2」，我希望顯示容器「測試2」，並且「測試1」和「測試3」保持隱藏狀態。

非常感謝。

來源

2011-09-06 Darren

您應該能夠將此功能像這樣添加到您的代碼：

$(document).ready(function() { 
    $(".toggle_container").hide(); 
    $("h2.trigger").click(function() { 
     $(this).toggleClass("active").next().slideToggle("slow"); 
     return false; //Prevent the browser jump to the link anchor 
    }); 

    $("a[href='" + window.location.hash + "']").parent(".trigger").click(); 
});

來源

2011-09-06 13:40:57 hunter

這絕對是完美的，非常感謝您的快速回復和解釋。 – Darren

謝謝！如果你想允許書籤，你不應該''返回false;'在你的觸發器中點擊以便散列可以存在。 – hunter

當URL爲http://www.domain.com/content/#test2時，window.location.hash將保存值#test2。這是你應該在jQuery的屬性選擇用什麼，你用它來準備處理程序中找到<a>元素：（Demo一個更優雅的實現是必然存在的。）

$(document).ready(function() { 
    ... 

    if (window.location.hash) { 
     $('h2.trigger + .toggle_container').hide(); // Hide all... 
     $('h2.trigger').has("a[href='" + window.location.hash + "']").next('.toggle_container').show(); // ... but show one 
    } 
});

更新
我我的第一個答案在很多方面是不正確的：-S

來源

2011-09-06 13:35:23 jensgram

這不是確切的jQuery選擇器。這些值存儲在'href'屬性中，而不是'id'屬性中。 –

$(document).ready(function() { 
    $('a').each(function() { 
     if($(this).attr('href') == window.location.hash) { 
      $(this).parent(".trigger").click(); 
     } 
    }); 
);

來源

2011-09-06 13:49:09

jQuery切換和錨鏈接

回答

相關問題