使用锚来显示div

Question

我正在使用jquery，需要完成一些事情。

1）当有人点击一个链接（或在我的情况下，一个div）来显示另一个div时，我想在网址上添加一个锚点。

因此，如果有人点击“直播”链接，“直播”div会向下滑动，我们会将#live添加到网址中。

2）如果有人访问该页面并将#live锚点保留在网址的末尾，则应立即显示“live”div。

我知道如果有人点击div，如何处理slideDown（）的基本部分。我不知道如何附加主题标签，或者使其成为加载页面时检查主题标签并显示相应的div。

任何帮助理解这一点将不胜感激。提前谢谢。

Answer 1

为URL添加哈希就像操作location.hash一样简单，例如：

$("a.live").click(function() {
    window.location.hash = 'live'; // not needed if the href is '#live'
});

您可以轻松测试它的存在，并根据页面加载时的值进行相应操作，例如：

$(document).ready(function() {
    var hashVal = window.location.hash.split("#")[1];
    if(hashVal == 'live') {
        $("#live").show();
    }
});

Answer 2

如果您有这样的标记：

<a href="#div5" class="toggler">Toggle Div 5</a>
<div id="div5">Content for Div 5</div>

你可以在jQuery中执行此操作：

$("a.toggler").click(function() {
  $(this.hash).slideToggle();
});

或者使用rel或点击div的内容，如下所示：

<div rel="#div5" class="toggler">Toggle Div 5</a>
<div id="div5">Content for Div 5</div>

并将jQuery调整为：

$("div.toggler").click(function() {
  var hash = $(this).attr("rel");
  $(hash).slideToggle();
  window.location.hash = hash;
});

我的建议是在锚点上使用display:block;来做你想做的事情，并利用这里的默认浏览器行为，它会点击哈希值。

无论上述哪种方法，您都可以在页面加载中显示如下：

$(function() {
  if(location.hash != "") {
    $(location.hash + ":hidden").slideDown();
  }
});