問題描述

我的網站上的面包屑導航有問題.

I have an issue with the breadcrumb on my site.

在頁面加載時，會顯示主頁(這是正確的).當我點擊導航菜單中的鏈接時，面包屑會更新為:

On page load, the Home is displayed (which is correct).. When i click on a link within my navigation menu, the breadcrumb is updated with say:

首頁 > 新頁面

但是，當加載新頁面時，面包屑會返回到僅顯示主頁.

However, when the New Page is loaded, the breadcrumb goes back to only displaying Home.

我的導航 JSP 文件:

My Navigation JSP file:

<nav class="nav">
  <ul class="wrap">

    <li class="menu-nav--home">
      <a href="/home" title="home">
        <span class="icon-home"></span>
      </a>
    </li>
    <ul>
      <li><a href="/business">Business</a></li>
      <li><a href="/search">Search</a></li>
      <li><a href="/details">Search Deatils</a></li>
      <li><a href="/update">Change Records</a></li>
      <li><a href="/delete">Remove</a></li>
      <li><a href="/order">Order Deatils</a></li>
      <li><a href="/checkout">Checkout</a></li>
    </ul>
  </li>
</ul>
</nav>

<div class="wrap breadcrumb">
  <div class="item">
    <a href="#home">Home </a>
  </div>
</div>

我的 jQuery 代碼:

My jQuery code:

$(function() {
  createBreadcrumbs();      
}

function createBreadcrumbs() {
  $('.site-nav a').on('click', function() {
    var $this = $(this),
    $bc = $('<div class="item"></div>');

    $this.parents('li').each(function(n, li) {
      var $a = $(li).children('a').clone();
      $bc.prepend(' > ', $a);
    });

    $('.breadcrumb').html( $bc.prepend('<a href="/">Home </a>') );    
    return false;
  });

任何幫助表示贊賞.

我已嘗試遵循此處的建議 - jquery - 動態面包屑

I have attempted to follow the advice found here - jquery - dynamic breadcrumb

謝謝

推薦答案

您的代碼中有幾個錯誤.首先，您忘記了以下代碼中的 );:

There are a couple of errors in your code. First of all, you are forgetting a ); in the following code:

$(function() {
  createBreadcrumbs();      
} ); //HERE!

您可能忘記將最后一個 } 復制到此問題中.我在這里添加了那個.您正在將處理程序附加到作為具有 site-nav 類的元素的子元素的鏈接.您的代碼中沒有這樣的東西.將其更改為 .nav a.

and you might have forgotten to copy the last } to this question. I've added that one in here. You are attaching a handler to links that are a child of an element with the site-nav class. There is no such thing in your code. Change that to .nav a.

function createBreadcrumbs() {
  $('.nav a').on('click', function() {
    var $this = $(this),
    $bc = $('<div class="item"></div>');

    $this.parents('li').each(function(n, li) {
      var $a = $(li).children('a').clone();
      $bc.prepend(' > ', $a);
    });

    $('.breadcrumb').html( $bc.prepend('<a href="/">Home </a>') );    
    return false;
  });
}

如果您希望它實際顯示某些內容，則需要使用 ajax 加載頁面并將生成的 html 推送到 DOM 中.

If you want this to actually display something, you'll need to load the page with ajax and shove the resulting html into the DOM.

這篇關于加載新頁面后，HTML 面包屑顯示然后丟失位置的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！