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”锚点位于包装器范围内，但选择器仍可在其上正常工作。

jQuery：如何在url中隐藏带锚点的节

1 个答案: