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

问题描述

我的网站上的面包屑有问题.

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文件:

<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面包屑显示，然后在加载新页面后丢失位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！