1

<ul>HTMLタグを使用してWebページでメニューを選択しています.3つの<li>タグがあり、リスト項目には<a>タグがあります。ページの最初のロードでは、class 属性を持つリスト項目タグの 1 つを書きました。ここで、2 番目のアンカー タグをクリックし、3 番目のリスト アイテム タグにも移動したときに、そのクラス属性を最初のリスト アイテム タグから 2 番目のリスト アイテム タグに移動したいと考えています。私の質問は、プレーンな JavaScript または jQuery を使用して、ASP .NET MVC 3 でそれを行うにはどうすればよいですか?

これが私のコードです：

<div id="menu">
    <ul>
        <li class="current_page_item">@Html.ActionLink("Index", "Index", "Home")</li>
        <li>@Html.ActionLink("Contact Us", "ContactUs", "Home")</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>

    </ul>
</div>
4

1 に答える 1

2

jQuery の使用:

$('#menu li').click(function(){
    $('.current_page_item').removeClass('current_page_item');
    $(this).addClass('current_page_item');
})

Javascript はもう少し冗長ですが、考え方は同じです。

var listnodes = document.getElementById('menu').getElementsByTagName('li');
for(var i = 0; i < listnodes.length; i++){
    listnodes[i].addEventListener('click',function(){
        var listnodes = document.getElementsByClassName("current_page_item");
        for(var i = 0; i < listnodes.length; i++){
            listnodes[i].className = "";// this is not quite the same as removeClass
        }
        this.className = "current_page_item";
    });
}

そのクラスを持つリスト項目は常に 1 つしかないため、内側のループは不要ですが、可能な限り jQuery ロジックを複製したかったのです。

于 2012-11-07T05:37:59.890 に答える