Question

我想在我的网站上用jQuery创建面包屑。但我被卡住了。

以下是我的编码：

<ul id="bc" class="bc">
     <li><a href="www.test.com/index.php">Home</a></li>
     <li><a href="www.test.com/about.php">About us</a>
         <ul>
            <li><a href="www.test.com/1.php">1</a></li>
            <li><a href="www.test.com/2.php">2</a></li>
        </ul>
    </li>

$(document).ready(function(){
    var str=location.href.toLowerCase();
    $(".bc li a").each(function() {
      if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
           $("li.highlight").removeClass("highlight");
           $(this).parent().addClass("highlight");
           var outerNav = $(this).parent().parent().parent();
           var outerNav2 = $(this).parent().parent().parent().parent().parent();

           if(outerNav.is("li")) {
              outerNav.addClass("highlight");
           }
           if(outerNav2.is("li")) {
              outerNav2.addClass("highlight");
           }
           document.title=$(this).text();
      }
    });

})

我需要这样：

当我点击我们时：

主页 - ＆gt;关于我们

当我点击1：

主页 - ＆gt;关于我们 - ＆gt; 1

Answer 1

尝试

$(function() {

    var str = location.href.toLowerCase();

    var el = $('.bc li a[href="' + str + '"]').parent();
    if (el.length) {
        var els = [];
        do {
            el.addClass('highlight');
            els.push(el);
            el = el.parent().closest('li');
        } while (el.length && !el.parent().is('.bc'));
        el.addClass('highlight');

        while (el.length) {
            els.push(el);
            el = el.prev();
        }

        var arr = $.map(els, function(v, i) {
                    return $('a', v).text();
                }).reverse();
        document.title = arr.join('-->');
    }

});

演示：Fiddle

我坚持使用breadcrumbs jQuery

1 个答案: