根据点击锚点链接更改URL

我有一个菜单链接到页面上的锚点（全部内置WordPress）。例如：根据点击锚点链接更改URL

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

来源

2013-10-24 NW Tech

明白，你的情况是什么样类似的jQuery标签只需要做出一些改变。

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

原谅我，如果这不是

来源

2013-10-24 17:31:48 Showva

您可以使用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-24 17:36:42 Mina

对不起，延迟响应。我无法完全实现这一点，尽管使用了您建议的代码，但更改链接不起作用。我用当前的代码更新了这个问题。 TIA –

@NWTech您正在JS中使用数据属性，但尚未将它们添加到您的标记中。请在这里看到一个演示http://fiddle.jshell.net/TW3tp/1/ – Mina

取决于您希望如何解决方案，您只能通过css完成此操作。通过label和radio button，您可以切换元素的可见性，使其看起来像选项正在改变。

jsFiddle示例

来源

2013-10-24 17:57:55 Justin

根据点击锚点链接更改URL

回答

相关问题