更改当前页面的 li 元素 ID

Question

这是我的问题：我有一个修改的spasticNav jQuery脚本，用于导航菜单，该脚本在id="selected"的li项上设置"blob"。当您将鼠标悬停在菜单中的另一个链接上时，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

确保没有

一个 nav li 有硬编码的id="selected"，然后你可以根据当前 URL 检查导航 hrefs 并动态添加 id，如下所示：

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