jQuery：如何隱藏網址中帶錨點的部分

Question

在我的頁面上，h3標題下的大多數p-部分都是隱藏的。如果你點擊它們，會顯示下面的內容。頁面打開時僅顯示第一部分。我使用jQuery來隱藏這些部分，如：

jQuery("#area h3:first").addClass("active"); 
jQuery("#area p:not(:first)").hide(); 

但是，如果在其他部分的一個錨，並且用戶在URL的末尾鏈接到它與＃？現在，它跳轉到隱藏部分，這是令人煩惱的，因爲文本沒有顯示。當網址中的錨點位於此部分內時，我不想隱藏該部分，例如http://domain.com/page.php#anchor_in_section_3。

如何防止該部分隱藏/摺疊？

詳細信息： 答案1之後，我發現兩個問題：如果以後使用.hide和.show只需一行代碼，則這些部分將保持隱藏狀態。這對jQuery來說似乎很快。 另一個問題是，使用解答1中描述的解決方案，jQuery只發現錨點，如果它不在子標記中。

更困難比我想象:)

所以的話描述的解決方案是，除第一和含有錨標記上的一個章節都應該被隱藏。錨可以在該部分的任何（孩子）標籤中。

嘗試了2個小時將此轉換爲jQuery，但沒有成功，我的可憐的jQuery知識。

Answer 1

要想從URL中的錨的名稱，請使用以下行：

var anchorName = document.location.hash.substring(1) 

檢索的URL的哈希部分，然後修剪的第一個字符出來（第一個字符永遠是哈希符號，「＃」）。這裏有一些文件：Javascript Tutorial, Location.hash。一旦你的，這樣做如下：

jQuery("#area p:has(a[name=" + anchorName + "])").show(); 

這將顯示在#area包含在URL中的散列部分指定的名稱錨任何段落。

編輯

要解決的jQuery是快速的問題，你可以使用一個發燒友的選擇，只隱藏最終會隱藏，像這樣的：

$("#area > p:not(:first)").filter("p:not(:has(a[name=" + anchorName + "]))").hide(); 

，說除第一個段落以外的所有段落，然後將那些不包含具有給定值的錨點的子集作爲name屬性，並隱藏剩餘的部分。第一段以及任何包含指定名稱的錨都將保持可見。

這裏有一個現場演示：http://jsfiddle.net/JDQxP/

因爲我們無法從上的jsfiddle的URL散列，我已經取代靜態值該行。一次取消一個註釋，以查看每個效果。請注意，「phasellus」錨點位於包裝範圍內，但選擇器仍能正常工作。