单页网站，显示/隐藏div，菜单按钮不会保持选中状态

Question

I'm trying to make a one page website with a menu (pictures, css roll over...), that will display a different div when each menu button is clicked. Only one div will be shown at time though and if one is already open it should be hidden. This is working well.

The problem I am having is that that the menu button which shows the result will not stay selected ie on the same picture as the 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've tried creating a function to change the class, but I've not had any luck.

Answer 1

Here is JS fiddle

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

    });
});

Answer 2

Change your stay() function to be as follows:

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