jquery - 根据单击的 anchor 链接更改 URL

Question

我有一个链接到页面上 anchor 的菜单(全部内置在 WordPress 中)。例如:

<nav id="primary">
  <ul>
    <li><a href="#services">Services</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#blog">Blog</a></li>
  </ul>
</nav>
<div class="container">
  <section id="services">Lorem ipsum dolor sit amet</section>
  <section id="about">Lorem ipsum dolor sit amet</section>
  <section id="portfolio">Lorem ipsum dolor sit amet</section>
  <section id="blog">Lorem ipsum dolor sit amet</section>
</div>

anchor ID 也与我网站上的 slug 名称相关。

我正在创建一个 float 侧边栏，其内容会根据单击的部分发生变化。当您滚动浏览页面时， float 侧边栏显然会固定在容器的一侧。

例如，当点击“关于”时， float 侧边栏可能会显示“了解更多关于 XYZ 的信息”，它链接到关于页面。我可能会在每个页面上使用自定义字段来生成 float 侧边栏中的文本。

我的问题是让它发挥作用，其中 float 侧边栏中的文本和链接会根据单击的导航中的链接而变化。不需要从我的页面获取动态文本和链接，我可以稍后使用 WordPress 函数解决这个问题。

我不确定该怎么做...也许 jQuery 是正确的解决方案？如果是这样，我只是不知道如何实现。

编辑 我已经尝试实现下面的一些建议。我目前的HTML和JS如下:HTML

<header class="site-header">
    <nav class="nav-primary">
        <ul>
            <li><a href="#services" data-href="/services">Services</a></li>
            <li><a href="#about" data-href="/about">About</a></li>
            <li><a href="#portfolio" data-href="/portfolio">Portfolio</a></li>
            <li><a href="#blog" data-href="/blog">Blog</a></li>
        </ul>
    </nav>
</header>
<div class="site-inner">
    <div class="content-site-wrap">
        <section id="services">Lorem ipsum dolor sit amet</section>
        <section id="about">Lorem ipsum dolor sit amet</section>
        <section id="portfolio">Lorem ipsum dolor sit amet</section>
        <section id="blog">Lorem ipsum dolor sit amet</section>
    </div>
</div>

JS

$(document).on('click', '.nav-primary a', function(){
    html = $('<a href="' + $(this).data('href') + '">' + $(this) + '</a>');
    $('.site-inner').html(html);
});

Answer 1

了解，您的情况与 jquery tabs 类似，只需要进行一些更改即可。

http://www.findsourcecode.com/css/jquery-how-to-create-simple-tabs-using-jquery-and-css/

如果不是这样请原谅