Question

所以我建立一个脚本，它将根据URL在哪个ID中隐藏div。这就是我到目前为止所做的：

<script>
$(function(){ 
if (document.location.href.indexOf('#aberdeen') > 0) 
$("#centralia, #chewelah, #everett, #harbour-pointe").hide();

if (document.location.href.indexOf('#centralia') > 0) 
$("#aberdeen, #chewelah, #everett, #harbour-pointe").hide();

if (document.location.href.indexOf('#chewelah') > 0) 
$("#aberdeen, #centralia, #everett, #harbour-pointe").hide();

if (document.location.href.indexOf('#everett') > 0) 
$("#aberdeen, #chewelah, #centralia, #harbour-pointe").hide();

if (document.location.href.indexOf('#harbour-pointe') > 0) 
$("#aberdeen, #chewelah, #everett, #centralia").hide();

if (document.location.href.indexOf('#') < 0)
    $(".directory").show();
});
</script>

然而，即使URL中附加了ID，它仍然显示所有这些内容。有什么想法吗？

Answer 1

这称为“哈希”，而不是“ID”。它位于document.location.hash，而不是document.location.href。

if (document.location.hash === '#aberdeen') {
    $("#centralia, #chewelah, #everett, #harbour-pointe").hide();
}

Answer 2

试试这个，你可以为这些项添加一个类并使用document.location.hash：

$(function(){ 
   var id = document.location.hash;
   $('.all').not(id).hide() // hide them expect the element that has an id of hash
});

Answer 3

尝试：

if (document.location.hash.indexOf('#aberdeen') != -1) {
    $("#centralia, #chewelah, #everett, #harbour-pointe").hide();
}

Answer 4

作为上面给出的Javascript解决方案的替代方案，您可以在CSS（仅限现代浏览器）中执行此操作：

如果您为所有div提供例如hashdisplay类，则可以使用以下样式：

.hashdisplay { display: none; }
.hashdisplay:target { display: block; }

http://jsfiddle.net/9qCYU/

警告！仅适用于支持:target伪类的浏览器！

http://reference.sitepoint.com/css/pseudoclass-target

URL中的ID不隐藏其他div

4 个答案: