如何在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，并在网址中添加特定的#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）使其更简单，更灵活。

Answer 3

其他人已经回答了URL哈希部分，我只会对脚本发表评论：

> <script language="javascript">  

不推荐使用language属性，type是必需的，所以：

<script type="text/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';
>     }

鉴于div在第一次加载时显示值为''的可能性非常高，你最好不要测试style.display = 'none'，所以：

if (ele.style.display == 'none') {
    ele.style.display = '';
    text.innerHTML = 'Hide';

} else {
    ele.style.display = 'none';
    text.innerHTML = 'Show more';
}