Setting nav-item to active after carousel-caption button clicked with jQuery

问题

I'm running into an issue when trying to go to the href of a carousel-caption button. This button links you to the reptile on the reptiles.html page. When the carousel-caption button is clicked, it doesn't highlight/set the reptiles.html nav-item to active, but rather (I think) the dropdown item. Here is my code for the navbar, carousel, and jQuery which handles setting the nav-items to active when clicked:

$(function() {
  $('a').each(function() {
    if ($(this).prop('href') === window.location.href) {
      $(this).addClass('active');
      $(this).parents('li').addClass('active');
    } else {
      $(this).removeClass('active');
      $(this).parents('li').removeClass('active');
    }
  });
});

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
  <div class="container">
    <img class="mr-2" src="img/snakeicon.png">
    <a class="navbar-brand" href="index.html">Homeschool Herpetology</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      </button>
    <div class="navbar-collapse collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index.html"><u>Home</u></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about.html">About & Booking</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="reptiles.html">Our Reptiles</a>
          <div class="dropdown-menu" aria-labeledby="navbarDropdown">
            <a class="dropdown-item" href="#">Little Foot</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="reptiles.html#mangoMedia">Mango</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="reptiles.html#montyMedia">Monty</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="reptiles.html#sheikMedia">Sheik</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="reptiles.html#zeldaMedia">Zelda</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

...

<div id="homeCarousel" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/Zelda.jpg" class="d-block w-100" alt="" />
      <div class="carousel-caption">
        <a role="button" href="reptiles.html#sheikMedia" style="text-decoration: none;">
          <h3 class="text-light">Meet Sheik!</h3>
        </a>
      </div>
    </div>
    <div class="carousel-item">
      <img src="img/Monty.jpg" class="d-block w-100" alt="" />
      <div class="carousel-caption">
        <a role="button" href="reptiles.html#montyMedia" style="text-decoration: none;">
          <h3 class="text-light">Meet Monty!</h3>
        </a>
      </div>
    </div>
    <div class="carousel-item">
      <img src="img/Sheik.jpg" class="d-block w-100" alt="" />
      <div class="carousel-caption">
        <a role="button" href="reptiles.html#zeldaMedia" style="text-decoration: none;">
          <h3 class="text-light">Meet Zelda!</h3>
        </a>
      </div>
    </div>
    <div class="carousel-item">
      <img src="img/Mango.jpg" class="d-block w-100" alt="" />
      <div class="carousel-caption">
        <a role="button" href="reptiles.html#mangoMedia" style="text-decoration: none;">
          <h3 class="text-light">Meet Mango!</h3>
        </a>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#homeCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#homeCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

...

来源：https://stackoverflow.com/questions/61842189/setting-nav-item-to-active-after-carousel-caption-button-clicked-with-jquery