1

私は Web ベースの ASP.NET MVC 3 Razor を使用しており、すべてのページで使用されるレイアウトとレンダリングされた本文を定義していますが、特別なことは何もありません。私がやりたいのは、メニューで選択した名前のページを強調表示することだけです。

< ul > を使用したシンプルなメイン メニューを次に示します。

<ul id="menu">
    <li id="1">@Html.ActionLink("menu1", "menu1", "Home")</li>
    <li id="2">@Html.ActionLink("menu2", "menu2", "Home")</li>
    <li id="2">@Html.ActionLink("menu3", "menu3", "Home")</li>
</ul>

私の質問に: 選択した < li > タグを強調表示する正しい方法は何ですか? 私はjQueryを使用することを考え、次のようなことをしました：

$(document).ready(function () {
    $("#menu li").click(function () {
        if (this.id == "1") {
            this.css("background","#CCCCCC");
        }
        else if (this.id == "2") {
            this.css("background","#CCCCCC");
        }
        else if (this.id == "3") {
            this.css("background","#CCCCCC");
        }
    });
});

しかし、それは正しく機能していません。< li > をクリックするたびに関数が呼び出されますが、 < li > の背景は変更されません。後でレイアウトをロードする（およびこのリストの背景プロパティを上書きする）ことが原因かどうかはわかりません。

私が考えた次の方法は、どういうわけかコントローラーを介してデータを渡すことですが、そのような小さなことには必要ないと思います。

すべてのアイデアや考えは本当に感謝しています!

4

2 に答える 2

1

内部イベント ハンドラーthisは純粋な DOM オブジェクトを参照します。jQuery関数を呼び出すには、ラップする必要があります$()（のようにcss）：

$(document).ready(function () {
    $("#menu li").click(function () {
        if (this.id == "1") {
            $(this).css("background","#CCCCCC");
        }
        else if (this.id == "2") {
            $(this).css("background","#CCCCCC");
        }
        else if (this.id == "3") {
            $(this).css("background","#CCCCCC");
        }
    });
});

働くフィドル

于 2013-08-20T12:32:08.420 に答える
1

jQuery内で一度.idを実行するほど単純ではないことを覚えているようです。代わりに、jQuery の属性セレクターを使用してください。

$(document).ready(function () {
    $("#menu li").click(function () {
        if (this.attr['id'] == "1") {
            this.css("background","#CCCCCC");
        }
        else if (this.attr['id'] == "2") {
            this.css("background","#CCCCCC");
        }
        else if (this.attr['id'] == "3") {
            this.css("background","#CCCCCC");
        }
    });
});

しかし、これは間違ったアプローチだと思います。現在のアイテムがクリックされたことがわかれば、ID の切り替えは関係ありません。以前のクラスからクラスを削除することを確認して、アクティブになっているときにクラスを与えるという簡単なことをします。

$(document).ready(function () {
    $("#menu li").click(function () {
        // Remove class from others
        $("li.activeNav").removeClass("activeNav");

        // Add class to the one clicked
        $(this).addClass("activeNav");
    });
});

CSS:

li.activeNav { background-color: #cccccc; }
于 2013-08-20T12:39:48.830 に答える