HTML Breadcrumb在加載新頁面後顯示然後丟失位置

Question

我的網站上的麪包屑導航有問題。

在網頁加載時，首頁顯示（這是正確的）。當我在我的導航菜單中點擊一個鏈接，麪包屑與更新說：

首頁>新頁面

然而，當新頁面被加載時，麪包屑回到只顯示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代碼：

$(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。