jquery active menu

Question

Hello, i have a question, i have a menu and i want to add some jquery so that the active menu tab has a different layout than the rest, here is my code:

<div id="menu">
<ul>
<li><div id="start"><span>start</span></div></li>
<li><div id="menuhome"><a href="index.php?page=home"<span>home</span</a</div</li>          <li><div id="menuvoorstellingen"><a><span>voorstellingen</span></a></div></li>
<li><div id="menuwinkelwagentje"><a><span>winkelwagentje</span></a></div></li>
<li><div id="menucontact"><a><span>contact</span></a></div></li>

the a tag has a backgroundimage atached to it to represent the menu button, what would i need to do so when the button is clicked it would get a new backgroundimage?

Answer 1

Assuming your url will always have page=[something], and your div ids will always be menu[something], try this:

var url = window.location.pathname  // sets a variable called url to the url path. 
                                    // Yours should be something like '/index.php?page=whatever'
                                    // You can test this by uncommenting the next line

//alert( url )                      // This should alert '/index.php?page=whatever'. 
                                    // If not, let me know
url = 'http://blah.com/index.php?page=test'
match = url.match( /page=([\w]{1,})/ )  // This is a regex match. 
                                        // It looks for the string 'page=', 
                                        // and then any word character (letter, number, underscore). 
                                        // If there's an '&', it will stop matching.    

match = match[1]    // match is actually an array. 
                    // the first one (index 0) is the entire string passed, 
                    // the second (index 1) is the actual match

$( '.active' ).removeClass( 'active' )  // in jQuery, this removes the class active 
                                        // from any thing with a class of active.
                                        // essentially this resets the page should anything be flagged as active

$( '#menu' + match ).addClass('active') // This then applies the class active to something with an id of menu + the match. 

and in css, give .active the bg image