更改当前页面的 li 元素 id

Question

这是我的问题： 我有一个修改过的 spasticNav jQuery 脚本，用于导航菜单，它在 id="selected" 的 li 项上设置一个“blob”。当您将鼠标悬停在菜单中的另一个链接上时，该斑点会移动，但随后会重置为 id="selected" 的 li 项目。

这一切都工作正常，但 li 项目必须具有 id="selected" ，否则 blob 将不会显示。我希望能够将当前页面的li项的id设置为“已选择”，而不必为每个页面制作唯一的导航列表。

这是 jquery:

(function($) {

$.fn.spasticNav = function(options) {

    options = $.extend({
        overlap : -15,
        speed : 500,
        reset : 1500,
        color : '',
        easing : 'easeOutExpo'
    }, options);

    return this.each(function() {

        var nav = $(this),
            currentPageItem = $('#selected', nav),
            blob,
            reset;

        $('<li id="blob"></li>').css({
            width : currentPageItem.outerWidth() + options.overlap,
            height : currentPageItem.outerHeight() + options.overlap,
            left : currentPageItem.position().left - options.overlap / 2,
            top : currentPageItem.position().top - options.overlap / 2,
            backgroundColor : options.color
        }).appendTo(this);

        blob = $('#blob', nav);

        $('li:not(#blob)', nav).hover(function() {
            // mouse over
            clearTimeout(reset);
            blob.animate(
                {
                    left : $(this).position().left - options.overlap / 2,
                    width : $(this).width() + options.overlap
                },
                {
                    duration : options.speed,
                    easing : options.easing,
                    queue : false
                }
            );
        }, function() {
            // mouse out    
            reset = setTimeout(function() {
                blob.animate({
                    width : currentPageItem.outerWidth() + options.overlap,
                    left : currentPageItem.position().left - options.overlap / 2
                }, options.speed)
            }, options.reset);

        });

    }); // end each

};

});

这是我的 html:

<div id="navcontainer">     <!--navigation-->
    <div id="nav">
    <ul>
        <li id="selected"><a href="index.html">Home</a></li>
        <li><a href="about_us.html">About Us</a></li>
        <li><a href="ministries.html">Ministries</a></li>
        <li><a href="calendar.html">Calendar</a></li>
        <li><a href="resources.html">Resources</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>
</div>

可能有一个简单的解决办法，但我仍然是一个新手。

Answer 1

确保所有导航 li 都没有硬编码的 id="selected"，然后您可以根据当前 URL 检查导航 href 并动态添加 id，如下所示：

$('#nav').find('li').each(function(i, ele){
    if (window.location.href.indexOf($(this).find('a').attr('href')) >= 0) {
        this.id = "selected";
    }
});