Changing li element id for current page

Here's my issue: I have a modified spasticNav jQuery script for a navigation menu that sets a "blob" on the li item with id="selected". The blob moves as you hover over another link in the menu but then resets to the li item with id="selected".

This all works fine, but a li item has to have id="selected" or the blob won't show up. I want to be able to set the id of the li item of the current page to "selected" without having to make a unique navigation list for each page.

Here's the 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

};

});

and here's my 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>

There is probably an easy fix to this, but i'm still a newb.

---

Make sure none of the nav li's have a hardcoded id="selected", then you can check the nav hrefs against the current URL and add the id dynamically like so:

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