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

HTML Breadcrumb Displaying Then Losing Location Once New Page Is Loaded(加载新页面后，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 文件:

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