Jquery menu and button selection
<p>Hi 
I am trying to use jquery to build a top navigation. When a link button/menu is selected the button should be higlighted and display the selected item and when its goes to that page selected. </p>

<p>Is there anyway to do this. I have this script it kinda works but not completely.</p>

<pre><code>    &lt;script type="text/javascript" src="js/jquery-1.4.2.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    $(document).ready(function(){ 
        $('#hdcnav ul li a').click(function() {
                $('#hdcnav ul').find('img').each(function(){
                var imgsrc = $(this).attr('src');
                if(imgsrc.indexOf('selected')&gt;=0){$(this).attr('src',imgsrc.split('-')[0]+".gif");}
                });
                $(this).find('img').attr('src',$(this).find('img').attr('src').split('.')[0]+"-selected.gif");
            });
    }); 
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="nav"&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="page1.html"&gt;&lt;img src="images2.gif" alt="home" /&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="page2.html"&gt;&lt;img src="images3.gif" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="page3.html"&gt;&lt;img src="images4.gif" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images4.gif" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images5.gif" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images6.gif" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>
