Question

我使用这个旧教程作为我网站的参考： Scrolling Clouds

问题是当我打开/刷新页面时，没有默认的活动链接。所以我必须单击其中一个链接才能激活。我想在页面加载时使用默认链接，并在刷新时保持当前链接处于活动状态。现在，当我刷新页面时，当前内容保持不变，但没有活动的链接项。

这是我正在使用的代码：

$(document).ready(function() {
  $('a.link').click(function () {
    $('#wrapper').scrollTo($(this).attr('href'), 1300);  
    $('a.link').removeClass('selected');  
    $(this).addClass('selected');
    return false;  
  });  
});

所以我的简单问题是;如何在页面加载时定义“选定”链接项。以及如何在页面刷新时保持当前项目处于活动状态？

Answer 1

您可以获取页面的URL并删除哈希。检查你的div的id的散列，并将活动的类添加到匹配的div。

Answer 2

在本教程中，每次链接点击都会呈现return false，导致浏览器无法导航到哈希地址。如果你改为允许链接转到哈希，你就可以将滚动逻辑移到hashchange：

$(window).bind('hashchange', function() {
   // scroll to the proper div as identified by window.location.hash
   // and set active link
});

通过这种方式，当您刷新页面时，哈希将保留，您将获得导航的浏览器历史兼容性，并且您可以为某个活动面板添加书签。

为防止浏览器立即滚动到散列名称，您可能希望劫持click事件以手动设置window.location.hash，以允许脚本获取该散列更改并进行平滑滚动，并返回false，以防止默认的浏览器操作。这样，如果客户端未启用javascript，您也可以回退到标准HTML。

Answer 3

我同意@Purmou，但此解决方案并不直接适用于您的情况。单击示例中的链接包含return false，因此在您的情况下不会更改哈希值。您可以删除返回，但我认为它不是一个完美的解决方案，因为它会导致浏览器滚动到具有指定id的元素（我可能错了，你应该测试它）。 / p>

尝试History API怎么样？您可以使用pushState处理程序中的click方法手动设置地址，然后在刷新后使用它来标识应标记为活动的链接。

jquery - 在刷新时添加默认/活动链接

3 个答案: