Question

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

这一切都很好，但是li项必须有id =“selected”，否则blob不会显示。我希望能够将当前页面的li项目的id设置为“selected”，而不必为每个页面创建唯一的导航列表。

这是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

确保所有导航栏都没有硬编码id="selected"，然后您可以针对当前网址检查导航href，并动态添加ID，如下所示：

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

更改当前页面的li元素id

1 个答案: