2

liアイテムをクリックした後。active属性を css クラスに設定しましたliが、別のページを転送するためのリンクがあります。アクティブなCSSが消える?これを行う方法?古い選択したliアイテムをキャッシュするためにlocalstorageを使用しました。私は解決策を見つけることができません。リフレッシュ後にアクティブなクラス設定をアクティブにする方法は? ページを更新した後にアクティブなクラスを有効にする方法は?

<script type="text/javascript">

$(document).ready(function () {

    $("li").click(function () {
        var id = $(this).attr("id");
        console.log(id);

        var selectedolditem = localStorage.getItem('selectedolditem');
        if (selectedolditem != null) {

            $('#' + selectedolditem).siblings().find("active").removeClass("active");
            $('#' + selectedolditem).addClass("active");
            localStorage.clear();
            return;

        }

        $('#'+id).siblings().find("active").removeClass("active");
        $('#' + id).addClass("active");
        localStorage.setItem("selectedolditem", id);

    });
});

4

3 に答える 3

11

コードの問題は、onclick で取得しようとしていることです。それは間違った論理です。正しいロジックは次のとおりです。ページがロードされたら、それを取得します。liをクリックすると保存されます。を使用するときにも問題がfind("active")あります。クラス文字を使用する必要があります。.そうしないと、クラスではなくタグ名を持つ要素が検索されますactive

$(document).ready(function () {
    $("li").click(function () {
        var id = $(this).attr("id");

        $('#' + id).siblings().find(".active").removeClass("active");
            //                       ^ you forgot this
        $('#' + id).addClass("active");
        localStorage.setItem("selectedolditem", id);
    });

    var selectedolditem = localStorage.getItem('selectedolditem');

    if (selectedolditem != null) {
        $('#' + selectedolditem).siblings().find(".active").removeClass("active");
        //                                        ^ you forgot this
        $('#' + selectedolditem).addClass("active");
    }
});
于 2013-06-25T10:45:59.563 に答える
1

フォローしてみてください。

$(document).ready(function() {
            $('.active').removeClass('active');
            var currurl = window.location.pathname;
            var val=$('li:has(a[href="'+currurl+'"])').addClass('active');
        });
于 2016-05-13T11:07:00.500 に答える