根據點擊錨點鏈接更改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

回答

相關問題