Question

我有以下HTML代码，

<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时，页面正确加载侧边栏，

但是当用户单击“打开”时，页面首先加载了封闭的侧边栏，因为它已经给出了“page-sidebar-closed”类，然后Jquery函数将打开它，这会在页面加载时闪烁侧边栏，如关闭和开放，

我可以直接在课堂上应用某些功能吗？

Answer 1

文档准备就绪后，您可以使用$( 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 -->

在页面加载时应用css类

1 个答案: