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

发布于 2024-12-19 02:12:14 字数 600 浏览 1 评论 0原文

我使用这个旧教程作为我的网站的参考：滚动云

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

这是我正在使用的代码：

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

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

原文

I used this old tutorial as a reference for my website:
Scrolling Clouds

The problem is that when I open/refresh the page, there is no default active link.
So I have to click one of the links to become active.
I would like to have default link on the page load and keep the current link active when refreshing.
Now when I refresh the page the current content stays but there's no active link item.

Here's the code I am using:

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

So my simple question is; how to define the 'selected' link item on page load.
And how to keep the current item active on page refresh?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

逆蝶 2024-12-26 02:12:14

您可以获取页面的 url 并去除哈希值。根据 div 的 id 检查哈希值，并将活动类添加到匹配的 div 中。

回复收藏 0 原文

指尖微凉心微凉 2024-12-26 02:12:14

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

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

这样，当您刷新页面时，哈希将保留，您将获得浏览器历史记录导航的兼容性，并且您将能够为某个活动面板添加书签。

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

In the tutorial, every link click is rendering a return false, causing the browser not to navigate to the hashed address. If you instead allowed the links to go to the hashes, you would be able to move your scrolling logic to hashchange:

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

In this way, the hash will remain when you refresh the page, you will get browser history compatibility for your navigation, and you will be able to bookmark a certain active panel.

To prevent the browser from immediately scrolling to the hashed name, you may want to hijack the click event to manually set window.location.hash, to allow your script to pick up that hash change and do the smooth scrolling, and return false, to prevent the default browser action. This way, you also fall back to standard HTML in case javascript isn't enabled in the client.

回复收藏 0 原文