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）。

任何人都可以就此向我提出任何指示吗？

感谢Advace

Answer 1

这适用于任何哈希/ id对：

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

打破它：

if(window.location.hash) { - 只有在有哈希值时才这样做。
var hash = window.location.hash.substring(1); - 将哈希值放入变量中，在开头删除#（基于@ Mark对this question的回答）。
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

从页面获取网址并仅使用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');
 });

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

4 个答案: