應用CSS類

-1

我有下面的HTML代碼，應用CSS類

<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"); 
     }

我的問題是，當頁面加載它總是與封閉的側欄加載，這不是當用戶點擊了爲「關閉」，並存儲爲本地存儲，頁面加載下的問題直接關閉側邊欄，

但是，當用戶點擊爲「打開」時，頁面首先加載封閉的側欄，因爲它已經給了類'page-sidebar-closed'，然後Jquery函數將打開它，這給閃爍側欄，每當頁面加載，如關閉和打開，

我可以直接在類上應用某些功能嗎？

來源

2017-06-10 rjcode

能否請您提供您的鏈接，所以我得到一些更多的想法。謝謝。 –

@NarendraSolanki，它在私人領域，無法分享鏈接， – rjcode

你不能這樣做。您需要爲此使用服務器端語言。但是，也許如果你在vanilla js中進行檢查，你可以直接在打開body標籤後直接插入腳本。所以腳本立即運行。這是因爲jquery代碼只在文檔準備就緒時才運行。 –

一旦文檔準備就緒，您可以使用$(document).ready(function() { }來執行操作。在這裏，您可以根據用戶上次操作更改側欄的類別。確保您的js文件在css文件之前加載（儘管這會增加加載時間）以避免閃爍。

希望這有助於下面的例子演示相同。 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

回答

相關問題