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

Question

我正在尝试制作一个带有菜单（图片、css 翻转...）的单页网站，当单击每个菜单按钮时，它将显示不同的 div。但是，一次只会显示一个 div，如果一个已经打开，它应该被隐藏。这很好用。

我遇到的问题是显示结果的菜单按钮不会保持选中状态，即在与翻转（悬停）相同的图片上。

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');

    });
});
​

演示：http://jsfiddle.net/anKT3/159/

我尝试创建一个函数来更改类，但我没有任何运气。

Answer 1

将您的stay() 函数更改为如下：

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

Answer 2

这里是JS fiddle

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

    });
});