javascript - 一页网站，显示/隐藏 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');                        
    });
});