javascript - 使用 materialize css 在不同的页面上显示不同的侧边导航

Question

我正在制作一个简单的页面，我想在转到另一个页面时显示不同的侧边导航类。我正在使用 materialize css，我制作了一个自定义 css 来覆盖侧导航类，现在我想在转到另一个页面时显示正常的侧导航。有更好的方法吗？我需要你们的一些建议，这将是一个很大的帮助。

示例 HTML:

<nav class="white lighten-1" role="navigation">
  <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo center"></a>
    <ul class="right hide-on-med-and-down">
     <div class="right">
       <li><a class="waves-effect waves-light btn grey lighten-1">Login</a></li>
       <li><a class="waves-effect waves-light btn red lighten-1">Register</a></li>
     </div>
    </ul>

    <ul id="nav-mobile" class="side-nav fixed">
     <div class="list-group">
      <a class="list-group-item" href="#"><i class="fa fa-user fa-fw" aria-hidden="true"></i>&nbsp; User
      </a>
      <a class="list-group-item" href="#"><i class="fa fa-search fa-fw" aria-hidden="true"></i>&nbsp; Search
      </a>
    </div>
    </ul>
    <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
  </div>
</nav><!-- nav ending -->

CSS:

.side-nav {
 background-color: #27AEEB;
 color: #ffffff;
 margin-top: 75px;
 margin-left: 8px;
 height: 47%;
 overflow: hidden;
}

Answer 1

如果通过正常的侧边导航，你的意思是加载默认的侧边导航，那么你可能将所有侧边导航特定的 CSS 放在一个完全不同的类中，而不是 .side-nav您当前正在使用的类。你可以有一个，比方说一个 .custom-side-nav类，意思是你的ul标签有 .side-nav类应该看起来像 <ul id="nav-mobile" class="side-nav custom-side-nav fixed"> .您的 CSS 应如下所示:

.custom-side-nav {
    background-color: #27AEEB;
    color: #ffffff;
    margin-top: 75px;
    margin-left: 8px;
    height: 47%;
    overflow: hidden;
}

然后，无论何时导航到另一个页面，您都可以通过删除 .custom-side-nav 来使用 jQuery 恢复所谓的“正常”侧边导航。从你的侧面导航上课。您可以使用 .removeClass() 来做到这一点方法，例如 $("#nav-mobile").removeClass("custom-side-nav") .这样，如果您再次访问此页面，只需使用 $("#nav-mobile").addClass("custom-side-nav")，您就可以在侧边导航中再次应用自定义 CSS。 .

如果我误解了您的问题，请告诉我，在这种情况下，您可能需要更清楚地说明您真正想要实现的目标，以便我们共同努力制定具体的解决方案。