根据单击的锚链接更改 URL答案

【问题标题】：Changing a URL based on anchor link clicked根据单击的锚链接更改 URL
【发布时间】：2013-10-24 17:22:25
【问题描述】：

我有一个菜单链接到页面上的锚点（全部内置在 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>

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

我正在创建一个浮动侧边栏，它的内容会根据点击的部分而变化。当您滚动页面时，浮动侧边栏显然会固定在容器的一侧。

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

我的问题是让它发挥作用，浮动侧边栏中的文本和链接会根据单击的导航中的链接而变化。不需要从我的页面获取动态文本和链接，我可以稍后使用 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>

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

【问题讨论】：

标签： jquery html css wordpress

【解决方案1】：

了解，因为您的情况类似于 jquery 选项卡，只需要进行一些更改。

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

如果不是，请见谅

【讨论】：

【解决方案2】：

您可以使用data-attributes

HTML

<nav id="primary">
  <ul>
    <li><a href="#services" data-description="About Services" data-href="/services">Services</a></li>
    <li><a href="#about" data-description="About Us" data-href="/about">About</a></li>
    ...
</ul>
</nav>

<div id="sidebar"></div>

Javascript

$(document).on('click', '#primary a', function(){
    html = $('<a href="' + $(this).data('href') + '">' + $(this).data('description') + '</a>');
    $('#sidebar').html(html);
});

【讨论】：

抱歉延迟回复。尽管使用了您建议的代码，但我无法使其完全正常工作，更改链接不起作用。我已经用我当前的代码更新了这个问题。 TIA
@NWTech 您在 JS 中使用数据属性，但尚未将它们添加到您的标记中。请在此处查看演示 fiddle.jshell.net/TW3tp/1

【解决方案3】：

根据您想要的解决方案，您只能通过 css 完成此操作。使用label 和radio button，您可以切换元素的可见性，使其看起来像是选项正在改变。

jsFiddle 示例

【讨论】：