jQuery：如何不隐藏 url 中带有锚点的部分
在我的页面上，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 知识，没有成功。
On my page most p-sections under a h3-heading are hidden. If you click on them, the content beneath is shown. Only the first section is shown when the page is opened. I use jQuery to hide these section like:
jQuery("#area h3:first").addClass("active");
jQuery("#area p:not(:first)").hide();
But what, if there is an anchor in one of the other section and the user is linking to it with a # at the end of the url? Right now, it jumps to the hidden section, which is irritating, because the text is not shown. I would not like to hide the section when an anchor in the url is within this section e.g. http://domain.com/page.php#anchor_in_section_3.
How do I prevent the section to hide/collapse?
Detail:
After answer 1 I found two problems: If you use .hide and a .show just one line of code later, the sections remains hidden. That seems to fast for jQuery.
The other problem is, that with the solution described in answer 1 jQuery only finds the anchor, if it is not in a child tag.
It is more difficult than I thought :)
So the solution described in words is, that all sections except the first and the one containing the anchor tag should be hidden. The anchor can be in any (child)-tag of the section.
Tried 2 hours to transfer this into jQuery but without success with my poor jQuery-knowledge.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
要从 URL 获取锚点的名称，请使用以下行：
检索 URL 的哈希部分，然后剪掉第一个字符（第一个字符始终是哈希符号“#”）。以下是一些相关文档：Javascript 教程，Location.hash。完成后，执行如下操作：
这将显示
#area中包含锚点的任何段落，该锚点的名称在 URL 的哈希部分中指定。编辑
为了解决 jQuery 速度太快的问题，您可以使用更高级的选择来仅隐藏最终隐藏的内容，如下所示：
这表示要获取除第一个段落之外的所有段落，然后获取不包含给定
name属性值的锚点的子集，并隐藏剩余的内容。第一段以及任何包含带有给定名称的锚点的段落将保持可见。这是一个现场演示： http://jsfiddle.net/JDQxP/
因为我们无法获取来自 jsFiddle 上 URL 的哈希值，我已将该行替换为静态值。一次取消一个注释即可查看每一个的效果。请注意，“phasellus”锚点位于包装跨度中，但选择器仍然可以在其上正常工作。
To get the name of the anchor from the URL, use the following line:
That retrieves the hash portion of the URL, then trims the first character out (the first character will always be the hash symbol, "#"). Here's some documentation on that: Javascript Tutorial, Location.hash. Once you have that, do something like the following:
This will show any paragraph in
#areathat contains an anchor with the name specified in the URL's hash portion.EDIT
To solve the problem of jQuery being to fast, you can use a fancier selection to only hide the ones that will end up hidden, like so:
That says to take all paragraphs except the first one, then take the subset of those that don't contain an anchor with a given value for the
nameattribute, and hide whatever remains. The first paragraph, and any that contain an anchor with the give name will remain visible.Here is a live demo: http://jsfiddle.net/JDQxP/
Because we can't get the hash from the URL on jsFiddle, I've replaced that line with static values. Uncomment them one at a time to see the effect of each. Note that the "phasellus" anchor is in a wrapper span, but the selector still works properly on it.