使用Materialize CSS在不同页面显示不同的侧边导航栏

Question

使用Materialize CSS在不同页面显示不同的侧边导航栏

4

我正在制作一个简单的页面，在跳转到另一个页面时，我想要显示不同的侧边栏类。我使用materialize css，并制作了自定义css来覆盖side-nav类，现在我想要在跳转到另一个页面时显示普通的side-nav。有更好的方法吗？我需要你们的建议，这会是一大帮助。

示例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;
}

- claudios

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pratikms · Accepted Answer

如果你所说的正常的侧边导航是指加载默认的侧边导航，那么你可以将所有特定于侧边导航的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;
}

然后，每当您导航到另一个页面时，您可以使用jQuery从侧边栏中删除.custom-side-nav类来获取回所谓的“常规”侧边栏。您可以使用.removeClass()方法来实现，例如$("#nav-mobile").removeClass("custom-side-nav")。这样，如果您再次访问该页面，您可以通过简单地使用$("#nav-mobile").addClass("custom-side-nav")来重新应用自定义CSS样式到侧边栏。

如果我对您的问题理解有误，请告诉我，否则您可能需要更明确地表达您想要实现的目标，以便我们所有人都能合作找到一个具体的解决方案。