4

各メニューボタンをクリックすると異なるdivが表示されるメニュー(写真、cssロールオーバー...)を備えた1ページのWebサイトを作成しようとしています。ただし、一度に表示される div は 1 つだけで、既に開いている場合は非表示にする必要があります。これはうまく機能しています。

私が抱えている問題は、結果を表示するメニュー ボタンが選択されたままにならないことです。つまり、ロール オーバー (ホバー) と同じ画像上に表示されます。

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/

クラスを変更する関数を作成しようとしましたが、うまくいきませんでした。

4

2 に答える 2

2

stay()関数を次のように変更します。

$(function stay() {
    $('.menu li a').click(function stay() {            
            $('.menu li a').removeClass('selected');
            $(this).addClass('selected');                        
    });
});
于 2012-11-24T15:21:14.150 に答える
2

これがJSフィドルです

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

    });
});
于 2012-11-24T15:14:02.557 に答える