Javascript 在页面加载时应用css类_Javascript_Jquery_Html_Css

Javascript 在页面加载时应用css类

javascript jquery html css

Javascript 在页面加载时应用css类,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有下面的html代码 <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white page-sidebar-closed" style="background-color: #F5F5F5"> 我的问题是当页面加载时，它总是使用关闭的侧栏加载，当用户单击为“关闭”并存储为localstorage时，这不是问题，页面加载正确且侧栏关闭但当用户点击“打开”时，页面首先加载关闭的边栏，

我有下面的html代码

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

我的问题是当页面加载时，它总是使用关闭的侧栏加载，当用户单击为“关闭”并存储为localstorage时，这不是问题，页面加载正确且侧栏关闭

但当用户点击“打开”时，页面首先加载关闭的边栏，因为它给了类“page sidebar closed”，然后Jquery函数会打开它，每当页面加载时，边栏就会闪烁，比如closed和Open

我可以直接在类上应用一些函数吗？

您可以使用

$（document）.ready（function（）{}

在文档准备好后执行操作。在这里，您可以根据用户的上次操作更改侧边栏的类。确保在css文件之前加载js文件（尽管这会增加加载时间），以避免闪烁

希望这能有所帮助，下面的例子也演示了同样的情况。div的颜色在页面上已更改

$（文档）.ready（函数（）{
//在页面准备就绪时将div颜色更改为蓝色
$（“#demo”）.removeClass（'red-box'）.addClass（'blue-box'）；
})；

。红色框{
宽度：50px；
高度：50px；
背景色：#F44336；
}
.蓝盒子{
宽度：50px；
高度：50px；
背景色：#2196F3；
}

你能提供你的链接吗？这样我就能有更多的想法了。谢谢。@NarendraSolanki，它在私有域上，不能共享链接，你不能这样做。你需要使用服务器端语言来实现这一点。但是，如果你签入vanilla js，你可以直接将脚本内联到OpenBody标记之后。因此，脚本会立即运行。它发生在仅当文档准备就绪时才使用jquery代码运行。

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