使用具体化 CSS 在不同的页面上显示不同的侧导航

Display a different side-nav on a different page using materialize css

本文关键字：显示 导航 具体化 CSS      更新时间：2023-09-26

>我正在制作一个简单的页面，我想在转到另一个页面时显示不同的侧导航类。我正在使用 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;
}

如果您的意思是加载默认的侧导航，那么您可能将所有特定于侧导航的 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。

如果我误解了你的问题，请告诉我，在这种情况下，你可能不得不更多地阐明你到底想要实现的目标，以便我们都能制定具体的解决方案。

相关文章：