[jQuery] Help with jquery Navbar rollovers.

[Robert]

Hi I have been trying to find an answer to this question. I am trying
to create a nav bar using jquery that uses rollovers. So there is an
On state, off state, clicked state for three different tabs/images.

example: Home | Support | About

The problem I’m having is getting the clicked/on state to turn off the
other image/tab if it was already on/clicked state. What keeps
happening is each tab stays active when clicked instead of toggling
off and on.

Here is the code

$(document).ready(function() {


        // Navigation rollovers
        $("#nav a").mouseover(function(){
                imgsrc = $(this).children("img").attr("src");
                matches = imgsrc.match(/_on/);

                // don't do the rollover if state is already ON
                if (!matches) {
                imgsrcON = imgsrc.replace(/_off.gif$/ig,"_on.gif"); //
strip off extension
                $(this).children("img").attr("src", imgsrcON);
                }

        });

                $("#nav a").click(function(){
                imgsrc = $(this).children("img").attr("src");
                matchesclk = imgsrc.match(/_clk/);


                if (!matchesclk) {
                imgsrcClkON = imgsrc.replace(/_on.gif$/
ig,"_clk.gif"); // strip off extension
                $(this).children("img").attr("src", imgsrcClkON);
                }

        });

        $("#nav a").mouseout(function(){
                $(this).children("img").attr("src", imgsrc);
        });


});

Any help would be appreciated. I am new to jquery and I am really
having a touch time with this.