Question

我正在使用导航栏进行一些过渡。由于某些原因，我可以定位链接，而不能定位为活动状态。我要去哪里错了？这是我的HTML代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top py-0">
    <a class="navbar-brand" href="#">Studio</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#title_page">Home<span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#info">Information</a>
            <a class="nav-item nav-link" href="#program_mobile" id="navlink_lessson_program">Lesson Program</a>
            <a class="nav-item nav-link" href="#testimonials">Testimonials</a>
            <a class="nav-item nav-link" href="#contact">Contact</a>
        </div>
    </div>
</nav>

我正在使用的CSS：

/*Underline animation*/
.navbar-nav a:after,
.navbar-nav .active a:after {
  content: '';
  width: 0px;
  height: .1em;
  margin-top: .04em;
  display: block;
  background-color: white;
  transition: 1s;
}

.navbar-nav a:hover:after,
.navbar-nav .active a:hover:after {
  width: 100%;
 }


/*Background animation on menu items*/
.navbar-nav a:hover,
.navbar-nav a:focus,
.navbar-nav .active a,
.navbar-nav .active a:hover,
.navbar-nav .active a:focus {
    color: #FFF !important;
    border-radius: .5em;
    background-color: rgba(0,0,0,0.4);
    transition: 1s ease;
}

Answer 1

如您在此处看到的，定位.active链接的方式是错误的，因为您告诉CSS寻找一个.active子元素的a类元素。这不会在您的文档上发生，您需要将其定义为具有{em> a类的.active标签，例如：a.active

/*Underline animation*/

.navbar-nav a:after,
.navbar-nav .active a:after {
  content: '';
  width: 0px;
  height: .1em;
  margin-top: .04em;
  display: block;
  background-color: white;
  transition: 1s;
}

.navbar-nav a:hover:after,
.navbar-nav .active a:hover:after {
  width: 100%;
}


/*Background animation on menu items*/

.navbar-nav a:hover,
.navbar-nav a:focus,
.navbar-nav .active a,
.navbar-nav .active a:hover,
.navbar-nav .active a:focus {
  color: #FFF !important;
  border-radius: .5em;
  background-color: rgba(0, 0, 0, 0.4);
  transition: 1s ease;
}

.navbar-nav a.active {
  color: red !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top py-0">
  <a class="navbar-brand" href="#">Studio</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#title_page">Home<span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#info">Information</a>
      <a class="nav-item nav-link" href="#program_mobile" id="navlink_lessson_program">Lesson Program</a>
      <a class="nav-item nav-link active" href="#testimonials">Testimonials</a>
      <a class="nav-item nav-link" href="#contact">Contact</a>
    </div>
  </div>
</nav>

无法定位Bootstrap v4上Nav项目的活动状态

1 个答案: