带有 jQ​​uery 地址的内部链接

发布于 2024-12-22 21:41:42 字数 565 浏览 4 评论 0原文

我正在尝试实现可爱的地址插件来处理更漂亮的链接的内部链接和后退按钮的使用。我设法让它工作,但是我注意到的一件事是,当它将 URL 从 /#section 更改为 /#/section 时,如果用户复制该 URL 并尝试在新窗口中打开它(或发送给朋友)它不会将用户带到页面上的该部分。显然是因为它不再被认为是锚点。

当用户通过 URL 导航时,如何使其位于正确的部分?

下面是我根据 jQuery 使用的代码片段 地址:

$('nav a').click(function() { 
    var pageTitle = 'Kevin Dare Foundation | ' + $(this).html(); 
    $.address.value($(this).attr('href').replace(/^#/, ''));
    $.address.title(pageTitle);
});

另外,这里还有查看其实际操作的链接: http: //nickdimatteo.com/kjd

I'm trying to implement the lovely Address plugin to handle internal links for prettier links and use of the back button. I managed to get it to work, however the one thing I noticed, is that when it changes the URL from /#section to /#/section if the user then copies that URL and tries to open it in a new window (or send to a friend) it does not take the user to that section on the page. Obviously because it's not recognized as an anchor anymore.

How can I get it to be on the right section when a user navigates via the URL?

Below is the snippet of code I'm using in accordance with jQuery Address:

$('nav a').click(function() { 
    var pageTitle = 'Kevin Dare Foundation | ' + $(this).html(); 
    $.address.value($(this).attr('href').replace(/^#/, ''));
    $.address.title(pageTitle);
});

Also here is the link to see it in action: http://nickdimatteo.com/kjd

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

×纯※雪 2024-12-29 21:41:42

最简单的方法可能是在文档加载时触发您的代码(如果存在 document.location.hash):

$('nav a').click(function() { 
    var pageTitle = 'Kevin Dare Foundation | ' + $(this).html(); 
    $.address.value($(this).attr('href').replace(/^#/, ''));
    $.address.title(pageTitle);
});

$(document).ready(function() {
    var hash = document.location.hash.replace(/^#\//, '');
    if(hash) {
        $('nav a[href="#' + hash + '"]').trigger('click');
    }
});

The simplest way may be to trigger the code you have when the document loads if there is a document.location.hash:

$('nav a').click(function() { 
    var pageTitle = 'Kevin Dare Foundation | ' + $(this).html(); 
    $.address.value($(this).attr('href').replace(/^#/, ''));
    $.address.title(pageTitle);
});

$(document).ready(function() {
    var hash = document.location.hash.replace(/^#\//, '');
    if(hash) {
        $('nav a[href="#' + hash + '"]').trigger('click');
    }
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文