1

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

3 回答 3

0

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

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

对不起，如果这不是

于 2013-10-24T17:31:48.257 回答
0

您可以使用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);
});
于 2013-10-24T17:36:42.933 回答
0

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

jsFiddle示例

于 2013-10-24T17:57:55.180 回答