由引导程序组成的导航栏元素，活动状态不起作用

Question

我使用引导代码制作了一个导航栏...但即使在我的导航栏的 li 类中提到“活动”状态后，它也没有在导航栏元素的网页上显示任何“活动”效果。

实际上我正在尝试在导航栏元素上添加和删除活动类..但我无法先解决上述问题...您能帮帮我吗...？

.navbar {
  position: fixed;
  top: 0px;
  width: 100%;
}

.nav-menu {
  padding: 0;
  background-color: #000000;
  opacity: 0.85;
  height: 60px;
}

.nav-menu ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0px;
  list-style: none;
}

.nav-menu a {
  display: block;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  margin: 0 0px;
  text-decoration: none;
}

.nav-menu a:hover {
  color: #FFFFFF;
  transition: 0.9s;
  box-sizing: border-box;
}

.nav-menu a:hover:after {
  transform: translateX(-50%) scaleX(1);
}

.nav-menu a:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  width: 100%;
  height: 2px;
  background-color: #C72C41;
  transition: transform 250ms;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top navbar-fixed-width" role="navigation"></div>
<nav class="navbar navbar fixed-top navbar-expand-sm nav-menu" id="nav">
  <div class="container">
    <a href="#" class="navbar-brand">\harsh_sharma/</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarid">
    
                    <span id="tc"><i class="fas fa-bars"></i></span>
                </button>
    <div class="collapse navbar-collapse" id="navbarid">
      <ul class="nav navbar-nav text-center ml-auto">
        <li class="nav-item active"><a class="nav-link" href="#header">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#experience">Experience</a></li>
        <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>


      </ul>
    </div>
  </div>
</nav>

Answer 1

我最近遇到了类似的问题。问题是，一些较新版本的引导程序不支持基 .nav 类中元素的活动类。这可以在这里找到。[https://getbootstrap.com/docs/4.5/components/navs/#base-nav] 解决方案是在样式表中自己描述活动类。然后将活动类放置在链接上。使链接具有“nav-link active”类 如果在样式表中定义您的 .active 类后，您直接将其放在列表中，则由于特殊性，导航链接样式将覆盖您的样式。这可以在这里阅读。 [https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity]。我已经编辑了您的代码，并且 home 元素现在处于活动状态。谢谢！

.navbar {
  position: fixed;
  top: 0px;
  width: 100%;
}

.nav-menu {
  padding: 0;
  background-color: #000000;
  opacity: 0.85;
  height: 60px;
}

.nav-menu ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0px;
  list-style: none;
}

.nav-menu a {
  display: block;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  margin: 0 0px;
  text-decoration: none;
}

.nav-menu a:hover {
  color: #FFFFFF;
  transition: 0.9s;
  box-sizing: border-box;
}

.nav-menu a:hover:after {
  transform: translateX(-50%) scaleX(1);
}

.nav-menu a:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  width: 100%;
  height: 2px;
  background-color: #C72C41;
  transition: transform 250ms;
}
.active {
   color:#FFFFFF;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top navbar-fixed-width" role="navigation"></div>
<nav class="navbar navbar fixed-top navbar-expand-sm nav-menu" id="nav">
  <div class="container">
    <a href="#" class="navbar-brand">\harsh_sharma/</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarid">
    
                    <span id="tc"><i class="fas fa-bars"></i></span>
                </button>
    <div class="collapse navbar-collapse" id="navbarid">
      <ul class="nav navbar-nav text-center ml-auto">
        <li class="nav-item"><a class="nav-link active" href="#header">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#experience">Experience</a></li>
        <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>


      </ul>
    </div>
  </div>
</nav>