使用 jQuery 重定向后设置活动部分答案

【问题标题】：Setting active section after redirect with jQuery使用 jQuery 重定向后设置活动部分
【发布时间】：2021-01-22 16:29:11
【问题描述】：

我正在构建一个包含不同部分的个人单页 HTML 模板，例如关于我、简历、作品集等。主题使用如下导航结构：

<ul class="navbar-nav">
    <li class="nav-item active">
        <a class="nav-link" href="#About">About Me</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#Portfolio">Portfolio</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#Resume">Resume</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#Blog">Blog</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#Contact">Contact</a>
    </li>
</ul>

不用说，每次单击菜单项时，页面都会移动到当前文档中的相应部分。

但是，我决定为名为 single-post.html 的博客文章创建一个单独的 HTML 文件，该文件使用完全相同的导航结构。

因此，我接下来要做的是将用户重定向回index.html，并在他们单击任何菜单项时将其移动到所选部分。换句话说，如果用户正在查看single-post.html 并点击<a class="nav-link" href="#Resume">Resume</a>，他们将被移至index.html 或主题的主页，并立即移至简历部分。

这就是我尝试在 jQuery 中使用 trigger() 的方式：

$('.single .nav-link').click(function(event){
    event.preventDefault();
    
    var pageID = $(this).attr('href').split('#');
    var selectedPage = pageID[1];
    
    window.location.href = 'index.html';
    
    $('.nav-link[href="#'+ selectedPage +'"]').trigger('click');
});

注意：类single分配给single-post.html的<body>。

代码最终将用户重定向到索引文件，但所选部分不会有active 状态。

感谢您对此提供的帮助。

【问题讨论】：

标签： jquery redirect triggers

【解决方案1】：

您不能在post.html 中编写代码以在index.html 中运行...而且您在window.location.href = 'index.html'; 之后的任何内容都不会被看到，因为浏览器正在加载index.html。

但是你想做的事情很简单，因为你已经有了锚。

您知道单击锚点<a class="nav-link" href="#Resume">Resume</a> 会将页面定位到具有Resume id 的元素...

在加载index.html 时，通过在地址栏中直接添加#Resume 可以完成相同的操作。
（如果你不知道......试试看）。

所以如果你跟着我...

在post.html 页面中，这将完全符合您的要求：

window.location.href = 'index.html' + $(this).attr('href');

【讨论】：

所以你提出的是一种查询字符串解决方案，将变量传递到另一个页面。我有这个想法。但是没用，因为不想在地址栏显示链接的href。有没有其他方法可以实现我想要在这里做的事情，还是唯一的解决方案？
当您单击导航中的链接时，该 href 无论如何都会出现在地址栏中...您之前真的没有注意到它吗？
不，它没有。我通过将event.preventDefault(); 添加到点击功能来防止它出现在地址栏上。
好吧……这就是简单的解决方案。但是你可以寻找 localStorage 。这个other answer I rencently made 就是一个例子。检索 href 值后，您只需滚动到右侧的 div。