javascript - 在 javascript 中使用来自 URL 的锚标记作为 id

Question

我正在尝试在 javascript 中使用 URL 中的锚标记来显示/隐藏 html 页面中的特定 div。这是一个相同的例子。

<div style="display:none;" id="test_one">Display this box when one</div>
<div style="display:none;" id="test_two">Display this box when two</div>

现在，我想要的是，当 URL 为http://www.example.com/this_page.html#test_one时，我想显示第一个 div（id 为 test_one）。同样，当 URL 为http://www.example.com/this_page.html#test_two时，我想显示第二个 div（id 为 test_two）。

任何人都可以请给我任何指示吗？

提前感谢

Answer 1

这应该适用于任何哈希/ID 对：

if(window.location.hash) {
    var hash = window.location.hash.substring(1);
    document.getElementById(hash).style.display = "inline";
}

分解它：

1. if(window.location.hash) {- 只有在有哈希值的情况下才这样做。

2. var hash = window.location.hash.substring(1);- 将哈希值放入变量中，删除#开头的 （基于@Mark 对这个问题的回答）。

3. document.getElementById(hash).style.display = "inline";id- 将页面上与哈希相同的元素设置为可见display值。

Answer 2

在 JS 中尝试：

if(document.URL=' http://www.example.com/this_page.html#test_one')
document.getElementById('test_one').display='inline';

elseif(document.URL=' http://www.example.com/this_page.html#test_two')
document.getElementById('test_two').display='inline';

Answer 3

看看:target伪选择器：

div:target {
   display: block;
}

尽管浏览器并未广泛支持它，但您可以将其作为渐进增强的第一步来实现。

Answer 4

从页面获取 URL 并仅使用 JavaScript 隐藏该特定 div

CSS：

.hidden { display: none; }

HTML

<div id="test_one" class="hidden"><!-- div content --></div>
<div id="test_two" class="hidden"><!-- div content --></div>

在 jQuery 中

 var pathArray = window.location.pathname.split( '#' );
 var div_name = pathArray[1];
 $(function () {
 if(div_name=="test_one")
 $('#test_one').removeClass('hidden');
 else
 $('#test_two').removeClass('hidden');
 });