0

サイトのブレッドクラムに問題があります。

ページの読み込み時に、ホームが表示されます (これは正しいです)。ナビゲーション メニュー内のリンクをクリックすると、ブレッドクラムが次のように更新されます。

ホーム > 新しいページ

ただし、新しいページが読み込まれると、ブレッドクラムはホームのみを表示するように戻ります。

マイ ナビゲーション 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-動的ブレッドクラム

ありがとう

4

1 に答える 1

1

コードにいくつかのエラーがあります。まず);、次のコードで a を忘れています。

$(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 に押し込む必要があります。

于 2013-07-25T09:06:49.413 に答える