javascript - 使用 anchor 标记和 isinViewport 的动态面包屑

Question

致力于为客户的网站创建一个小型 jquery 插件，这是一个使用 anchor 标记的简单面包屑系统，它根据当前可见的 anchor 标记更改面包屑列表中的最后一个元素。此外，我使用 HTML5 数据元素来存储每个页面名称，这样我也可以将其添加为面包屑列表中的第二个元素。

为了可见性，我使用了这个插件:https://github.com/zeusdeux/isInViewport

这是我正在使用的 fiddle :http://jsfiddle.net/7F59C/4/

这是 HTML:

<div class="header">head element
    <div id="breadcrumbs" data-page="About">
        <ul>
            <li><a href="#">Home</a></li>
            <li class="currentpage"></li>
            <li class="active"></li>
        </ul>
    </div>
</div>
<div class="spacer"></div>
<div class="gridContainer">
    <div class="space">
        take up some space<br />
        <a class="crumb" id="About" href="#">About Us</a>
    </div>
    <div class="space">
        take up more space<br />
        <a class="crumb" id="Other_heading" href="#">Other heading</a>
    </div>
</div>

JS:

$(document).ready(function() {
    $jbread();
});

$.fn.jbread = function () {

    //set bc as breadcrumbs list
    var bc = $("#breadcrumbs");

    //BUILD CURRENT PAGE BREADCRUMB ITEM
    //set currentpage to current page's data-page value
    var currentpage = bc.data("page");
    //set currentpage_link to current page's url
    var currentpage_link = window.location.pathname;
    //add currentpage as next li in breadcrumbs list
    $(".currentpage").html('<a href="' + currentpage_link + '">' + currentpage + '</a>');

    //UPDATE ACTIVE ITEM IN BREADCRUMB LIST
    $.fn.updateCrumbs = function () {
        var currentactive = $(e.target);
        $(".active").html(currentactive);
    }

    //WORK WITH ISINVIEWPORT PLUGIN
    $('div.gridContainer > a.crumb').updateCrumbs();
    $('div.gridContainer > a.crumb:in-viewport(10)').updateCrumbs();

    $(window).scroll(function() {
        $('div.gridContainer > a.crumb').updateCrumbs();
        $('div.gridContainer > a.crumb:in-viewport(250)').updateCrumbs();
    });

    //STYLE BREADCRUMB LIST

};

此外，CSS:

#breadcrumbs ul {
    list-style: none;
    float: left;
    padding: 2px;
}
#breadcrumbs ul li a {
    text-decoration: none;
    color: black;
}
.space {
    height: 500px;
    background-color: red;
}
.header {
    position: fixed;
    height: 100px;
    background-color: #FFF;
    width: 100%;
    margin-top: 0;
}
.spacer {
    min-height: 100px;
}

预期功能: 当用户向下滚动页面时，当类为“crumb”的 anchor 标记之一进入视口(viewport)(我已将其设置为页面下方 250-350 像素)时，我想要类为“active”的列表项"将使用刚刚触发该功能的 anchor 标记进行更新。我不确定我是否正确使用了 $(e.target)，或者它是否会引用正确的东西。

我希望这个功能能够正常工作，然后我需要创建一个实际的演示页面，以便在填充列表后充实其样式。这是另一个问题。

欢迎任何想法、评论或批评，因为我是 jQuery 的新手，并且质疑我在这方面的逻辑。

Answer 1

看起来你想要类似的东西

$.fn.updateCrumbs = function () {
    var currentactive = this.text();
    $(".active").text(currentactive);
}