Question

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

JS

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

Answer 1

明白，对于你的情况类似于jquery选项卡，只需要进行一些更改。

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

如果不是

，请原谅

Answer 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);
});

Answer 3

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

jsFiddle示例

根据点击的锚链接更改URL

3 个答案: