One website page, show / hide divs, menu button will not be selected

Question

I am trying to make a site on one page using a menu (pictures, css roll over ...) that will display a different div when each menu button is clicked. Only one div will be displayed at that time, although if it is already open, it should be hidden. It works well.

The problem that I encountered is that the menu button that shows the result will not remain selected, that is, in the same image as roll over (hover).

HTML:

<ul class="menu"> <li class="home"><a href="javascript:showHide('content1');" title="Home"><span class="displace"></span></a></li> <li class="credits"><a href="javascript:showHide('content2');" title="Credits"><span class="displace"></span></a></li> <li class="idea"><a href="javascript:showHide('content3');" title="Idea"><span class="displace"></span></a></li> </ul> <div id="content1">home text</div> <div id="content2">credits text1</div> <div id="content3">idea text</div>​ 

JS / jQuery:

 function showHide(d) { var onediv = document.getElementById(d); var divs=['content1','content2','content3']; for (var i=0;i<divs.length;i++) { if (onediv != document.getElementById(divs[i])) { document.getElementById(divs[i]).style.display='none'; } } onediv.style.display = 'block'; } $(function stay() { $('menu').click(function stay() { $('menu').removeClass('selected'); $(this).addClass('selected'); }); });​ 

Demo: http://jsfiddle.net/anKT3/159/

I tried to create a function to change the class, but I had no luck.

Answer 1

Modify the stay() function as follows:

 $(function stay() { $('.menu li a').click(function stay() { $('.menu li a').removeClass('selected'); $(this).addClass('selected'); }); }); 

Answer 2

Here is the JS script

 $(function stay() { $('ul.menu li a').click(function () { $('ul.menu li a').removeClass('selected'); $(this).addClass('selected'); }); });