1

こんにちは私は選択されたときにメニューの色を変更するためのjqueryを持っています

.selected{
    background-color: red;
}

$("#nav-container>li").click(function(){
    $(this).addClass('selected')
        .siblings()
        .removeClass('selected');
});

HTMLは次のとおりです。

<ul id="nav-container">
    <li id="welcome">
        <a href="/" >Welcome</a>
    </li>

    <li id="find">
        <a href="/find">Find</a>
    </li>

    <li id="talk">
        <a href="/talk">Talk</a>
    </li>

    <li id="events">
        <a href="/event">Events</a>
    </li>
</ul>

色の変更は行われますが、ページが新しいページにあるとき、またはページが新しいページにリロードされると、色は選択されなくなります。まだ追加していないものは何ですか？ここに何か足りないものがありますか？

4

4 に答える 4

2

jQueryは、ページのリロード後に選択したページを認識しません。selectedサーバー側のコード（php）を介してクラスを設定するか、ページのロード時にjQueryでどのページを表示しているかを確認selectedし、要素にクラスを設定する必要があります。 。

于 2012-10-25T08:15:28.627 に答える
0

addClassの効果は、現在のドキュメントでのみ有効になることに注意してください。SessionIDとPHPを使用できます

于 2012-10-25T08:15:04.343 に答える
0

これを試すことができます：

$(function(){
    var $ul = $("#nav-container");
    var path = window.location.pathname;
    var $a = $('a[href="'+path+'"]', $ul);
    if ( $a && $a.length ) {
        var $li = $a.parent();
        $li.addClass('selected');
    }
});

あなたが持っているクリック機能を削除します。

于 2012-10-25T08:23:13.480 に答える
0

これは正常な動作です。Javascript コンテキストはページに固有です。ページをリロードすると、一部の HTML マークアップが同じであっても、Javascript で設定された属性がリセットされます。

Cookie またはサーバー側コード (セッション) を使用して、永続的な要素の強調表示を実現できます。

jquery-cookie プラグインを使用すると、次のように Cookie を設定できます。

 $("#nav-container>li").click(function(){
        $(this).addClass('selected')
        .siblings()
        .removeClass('selected');
        $.cookie("selected", $(this).attr('id'), { path: '/' })
 });

 $(document).ready(function() {
        $("#" + $.cookie("selected")).addClass('selected')
 });

注: このコードはテストしていませんが、動作するはずです。もちろん、これを使用するには、ユーザーは Cookie を有効にする必要があります。

于 2012-10-25T08:24:29.833 に答える