URL上有哈希时如何打开隐藏的div？答案

【问题标题】：How to open a hidden div when a hash is on the URL?URL上有哈希时如何打开隐藏的div？
【发布时间】：2011-10-17 04:07:25
【问题描述】：

我正在使用此 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 添加到 URL？

非常感谢。

【问题讨论】：

翻译：请为我做，如果你是对的，我保证它会起作用。
@jared 对不起，我不是故意让它像那样脱落。我已经研究了几个小时没有运气，而且我对 JavaScript 很陌生，所以我想我会在这里发帖寻求帮助。我不认为那太可怕了。
如果您不反对 jQuery，请参阅stackoverflow.com/questions/680785/…。

标签： javascript html hash

【解决方案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 */;

【讨论】：

@mikeycgto 好点。 IE 中不支持使其成为使用它的问题之一。 ;)
@Jared Farrish 傻我！天才添加锚标签......我会添加两者，编辑我的答案，并相信你。谢谢！
JavaScript 总是可以覆盖:target 规则。我猜他以后仍然需要使用该功能以某种方式切换 div...（不过我认为两者可以一起使用）
现实是，可能没那么容易；如果 OP 需要一个跨浏览器的 CSS2(ish) 答案怎么办？然后呢？
我补充说根本不应该使用它，这只是一个小小的想法。 IE 不支持 :target 的事实本身就是一个交易破坏者，但为了记录，:target 的支持列表：Firefox (1.0+)、Safari (3.1+)、Opera (9.5+)、Chrome [reference.sitepoint.com/css/pseudoclass-target]。

【解决方案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>

此外，您可以使用 jQuery 之类的 javascript 框架使其更简单、更灵活。

【讨论】：

location.hash 包含实际的哈希字符，因此除非考虑到前置哈希字符，否则此解决方案（使用 getElementById(...)）很可能不起作用。
伙计，这是在挖掘过去@schlimmchen...我什至不记得写过那个。根据该信息进行了一些修改。
我不想打扰你，@hellodaniel。我发现了这个问题，尽管它的年龄和你的回答对我自己的 javascript 任务有所帮助，但我只是认识到它有这个缺陷......感谢您修改它！
我可以使用：```` var hash = window.location.hash.replace('#', ''); if (hash) { document.getElementById(hash).classList.add("bio-open"); } ```` 但是此页面上的其他功能不再起作用，所以我无法关闭此脚本打开的窗口

【解决方案3】：

其他人已经回答了网址哈希部分，我将仅对脚本进行评论：

> <script language="javascript">

不推荐使用语言属性，需要类型，所以：

<script type="text/javascript">

> function toggledean() {
>     var ele = document.getElementById("toggleTextdean");
>     var text = document.getElementById("displayTextdean");
> 
>     if(ele.style.display == "block") {

默认的 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';
}

【讨论】：