加载新页面后，HTML 面包屑显示然后丢失位置

Question

我的网站上的面包屑导航有问题。

在页面加载时，会显示主页（这是正确的）。当我点击导航菜单中的链接时，面包屑会更新为：

首页 > 新页面

但是，当加载新页面时，面包屑会返回到仅显示主页。

我的导航 JSP 文件：

<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 代码：

$(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 - dynamic breadcrumb

谢谢

Answer 1

您的代码中有几个错误。首先，您在以下代码中忘记了);：

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

您可能忘记将最后一个} 复制到此问题。我在这里添加了那个。您正在将处理程序附加到作为 site-nav 类元素的子元素的链接。您的代码中没有这样的东西。将其更改为 .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 中。