Question

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

为了提高知名度，我使用了这个插件：https://github.com/zeusdeux/isInViewport

这是我与之合作的小提琴：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;
}

预期功能：当用户向下滚动页面时，其中一个锚标签带有＆＃34; crumb＆＃34;进入了_Viewport（我在页面下设置为250-350像素），我希望列表项为＆＃34; active＆＃34;使用刚触发该函数的锚标记进行更新。我不确定我是否正确使用$（e.target），或者它是否会引用正确的东西。

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

任何想法，评论或批评都是受欢迎的，因为我对jQuery很新，并且质疑我对此的逻辑。

Answer 1

看起来你想要像

这样的东西

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

使用锚标签和isinViewport的动态面包屑

1 个答案: