Question

我的网站上有痕迹问题。

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

主页＆gt;新页

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

我的导航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中。

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

1 个答案: