jquery - 动态面包屑答案

【问题标题】：jquery - dynamic breadcrumbjquery - 动态面包屑
【发布时间】：2013-05-07 10:32:29
【问题描述】：

我正在尝试使用以下内容为我的网站创建面包屑导航系统：

<div class="breadcrumb">
    <div class="item"><a href="#home">Home / </a></div>
</div>

<div class="items">
   <ul>
     <li><a href="#test1">Test 1</a></li>
     <li><a href="#test1">Test 2</a>
        <ul>
            <li><a href="">Level 1</a></li>
            <li><a href="">Level 2</a></li>
        </ul>
     </li>
     <li><a href="#test1">Test 3</a></li>
  </ul>
</div>

我想做的是，当用户点击Test 1时，面包屑是Home / Test 1，如果他们然后点击Test 2，然后点击Level 1，面包屑将变成Home / Test 1 / Level 2

我一直在寻找 jQuery 来做到这一点，但不是 100% 确定如何最好地接近它。

任何想法将不胜感激

谢谢

【问题讨论】：

这可能已经在这里回答了：stackoverflow.com/questions/15213612/…
如果他们接着点击 Test 2 再点击 Level 1，面包屑会变成 Home / Test 1 / Level 2 不应该是 Home / Test 2 / 1级?
@Ejay 抱歉是一个错字。你是对的。
请注意，只有在单击链接实际上不会将您发送到其他页面时，使用 javascript/jquery 处理此问题才有意义

标签： jquery breadcrumbs

【解决方案1】：

示例http://jsfiddle.net/mPsez/3/

$('.items 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">Home</a>') );
    return false;
})

【讨论】：

我将如何实际替换 HTML？
在$('.breadcrumb a').html( bc.reverse().join(' / ') );中添加了那个位
如何让每个面包屑都有一个链接？即 Home / Test 1 etc?
精彩的正是我想要的！