使用锚来显示div

Question

我正在使用jquery,需要完成一些事情.

1)当有人点击链接(或在我的情况下,div)显示另一个div时,我想在网址上添加一个锚点.

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

2)如果有人访问该页面并将#live锚点保留在URL的末尾,那么"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();
  }
});