ページのロードにCSSクラスを適用し、私はhtmlコードの下に持って

-1

<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white page-sidebar-closed" style="background-color: #F5F5F5">

ページのロードサイドバーを閉じたときにCSSが適用されます

、

は、今私が保存してトグルを取得するjQueryとhtmlのストレージを使用していますナビゲーションバーの値は、

 var sidebar = $('.page-sidebar'); 
     var sidebarMenu = $('.page-sidebar-menu'); 
     var body = $('body'); 

     if (localStorage.getItem("toggler") == 'close') 
     { 
     body.addClass("page-sidebar-closed"); 
     sidebarMenu.addClass("page-sidebar-menu-closed"); 
     } 
     else 
     { 
     body.removeClass("page-sidebar-closed"); 
     sidebarMenu.removeClass("page-sidebar-menu-closed"); 
     }

私の問題は、ページのロードが、それは常に閉じサイドバーに読み込むときであるユーザーは、「クローズ」とクリックしたとそれがのlocalStorage、ページが読み込まcとして格納されている場合、これは問題ではありません

しかし、ユーザーが「開く」としてクリックしたときに、ページが「サイドバーを閉じる」クラスを指定したために閉じたサイドバーで最初に読み込まれ、Jquery関数が開くと、ページが読み込まれるたびにサイドバーが閉じて開きます

クラスに直接関数を適用できますか？

出典

2017-06-10 rjcode

私はいくつかのより多くのアイデアを得るためにあなたのリンクを提供していただけます。ありがとう。 –

@ NarendraSolanki、プライベートドメイン上にあり、リンクを共有できません。 – rjcode

できません。これにはサーバー側の言語を使用する必要があります。しかし、バニラjsのチェックを行う場合は、開いたbodyタグの直後にスクリプトをインラインで置くことができます。そのため、スクリプトはすぐに実行されます。 jqueryコードは、ドキュメントが準備ができているときにのみ実行されるために起こります。 –

$(document).ready(function() { }を使用して、ドキュメントの準備ができたらアクションを実行できます。ここでは、ユーザーごとの最後の操作ごとにサイドバーのクラスを変更できます。 cssファイルの前にjsファイルがロードされていることを確認してください（ロード時間が長くなりますが）。

希望すると、以下の例で同じことが分かります。ページの準備ができたら、divの色が変更されます。

$(document).ready(function() { 
 
    // change div color to blue on page ready 
 
    $("#demo").removeClass('red-box').addClass('blue-box'); 
 
});

.red-box{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #F44336; 
 
} 
 

 
.blue-box{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #2196F3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="demo" class="red-box"></div> <!-- div with red color -->

出典

2017-06-10 07:52:49

ページのロードにCSSクラスを適用し、私はhtmlコードの下に持って

答えて

関連する問題