如何在URL上使用哈希时打开隐藏的div？

Question

我正在使用这个javascript代码在我的网站上有一对"显示/隐藏"切换的div:

<script language="javascript"> 
function toggledean() {
    var ele = document.getElementById("toggleTextdean");
    var text = document.getElementById("displayTextdean");

    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Show more";
    } 
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide";
    }
} 
</script>

我应该在此代码中添加什么来在加载页面时显示div,并在URL中添加特定的#hash？

非常感谢你.

Answer 1

这不是你想要的javascript答案,但你可以尝试使用:target伪选择器.例如,

<!-- HTML -->
<div id="foo">show this with #foo.</div>
<div id="bar">#bar shows this.</div>

<style type="text/css">
    div {display: none}
    :target {display: block}
</style>

示例:http://jsfiddle.net/ZAHns/4/(感谢Jared添加锚点的想法).

根据您要做的事情,这可能会有效,但请考虑您的要求.

注意:用大量的盐来做这个反应 - 不要使用它.

要回答实际问题,请使用以下内容确定是否存在哈希:

var in_hash = location.hash.slice(1) === what_you_are_looking_for;
if (in_hash) ? /* IN HASH */ : /* NOT IN HASH */;

Answer 2

这样的事情应该工作：

<script>
    var hash = window.location.hash.replace('#', '');
    if (hash) {
        document.getElementById(hash).style.display = 'block'
    }
</script>

如果你只有一个元素，就像你的脚本一样，你可以调用函数来切换它，如果 url 中存在任何哈希：

<script type="text/javascript"> 
   function toggledean() {
    ...
    } 
    if (window.location.hash == '#dean') toggledean(); 
</script>

或者你可以让你的切换脚本更通用一点：

<script type="text/javascript"> 

var hash = window.location.hash.replace('#', '');   

function toggle (elementPartial) {

    var ele = document.getElementById('toggleText'+elementPartial);
    var text = document.getElementById('displayText'+elementPartial);
    if(ele.style.display == 'block') {
        ele.style.display = 'none';
        text.innerHTML = 'Show more';
    } else {
        ele.style.display = 'block';
        text.innerHTML = 'Hide';
    }
} 

if (hash) {
    toggle(hash); 
}

</script>

此外，您可以使用 javascript 框架（如 jQuery）使其更简单、更灵活。