导航栏活动类在引导程序 4 中不起作用

Question

我正在尝试将活动类添加到导航栏中当前打开的链接。我用谷歌搜索了很多。在 Stack Overflow 和答案中有很多与此问题类似的问题，但这些所有答案仅适用于像 href="#" 这样的哈希类型的导航栏，并且在我有网站和页面时不起作用。我想正确添加活动课程。我已经尝试了很多，但没有找到完美的答案。

这是我的代码：

<nav class="navbar navbar-expand-md navbar-dark sticky-top pt-0 pb-0">
    <div class="container nav_container">
        <a class="navbar-brand" href="<?php echo BASE_URL; ?>">
            <img src="<?php echo BASE_URL; ?>/resources/assets/img/logo/logo_default.png" class="img-fluid foodbox_logo">
        </a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mainNavbar">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link active" href="<?php echo BASE_URL; ?>">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="<?php echo BASE_URL; ?>/shop.php">Shop</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="<?php echo BASE_URL; ?>/cart.php">Cart</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="<?php echo BASE_URL; ?>/about-us.php">About Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="<?php echo BASE_URL; ?>/contact-us.php">Contact Us</a>
            </li>
          </ul>
        </div>
    </div>
</nav>

JS：

<script>
    $(document).ready(function() {
        $('a.nav-link').on('click', '.nav-item a', function (e) {
            $(this).parent().addClass('active').siblings().removeClass('active');
        });
    });
</script>

有人可以帮帮我吗？

Answer 1

使用下面的 sn-p 并在导航栏中 URL 的末尾添加 /。

   $(document).ready(function() {

   var url = [location.protocol, '//', location.host, location.pathname].join('');  

            $('.nav-item.active').removeClass('active');
            $('.nav-item a[href="' + url  + '"]').parent().addClass('active');
            $(this).parent().addClass('active').siblings().removeClass('active');


    });

Answer 2

jQuery 的定义不正确。在您的代码中，它试图在a.nav-link 中找到nav-item a，但它找不到任何东西。只需监视a.nav-link 的点击。详情见here

$(document).ready(function() {

  /*
    Temporarily disable hyperlinks to see menu work
  */
  $('a').attr("href", "#");

  $('a.nav-link').on('click', function(e) {
    $(this).parent().addClass('active').siblings().removeClass('active');
  });
});

nav {
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark sticky-top pt-0 pb-0">
  <div class="container nav_container">
    <a class="navbar-brand" href="<?php echo BASE_URL; ?>">
            <img src="<?php echo BASE_URL; ?>/resources/assets/img/logo/logo_default.png" class="img-fluid foodbox_logo">
        </a>
    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="mainNavbar">
      <ul class="navbar-nav ml-auto">
        <!-- Put class active at the correct level -->
        <li class="nav-item active">
          <a class="nav-link" href="<?php echo BASE_URL; ?>">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="<?php echo BASE_URL; ?>/shop.php">Shop</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="<?php echo BASE_URL; ?>/cart.php">Cart</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="<?php echo BASE_URL; ?>/about-us.php">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="<?php echo BASE_URL; ?>/contact-us.php">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 3

你可以试试下面的代码。

$(document).ready(function() {
        $('.nav-link').on('click', '.nav-item a', function (e) {
             $('.navbar-nav .nav-link').find(".active").removeClass("active");
             $(this).parent().addClass('active');
        });
    });

Answer 4

我已经测试了这段代码并且它正在工作。我稍微改变了你的选择器。试一试，看看它是否适合你。当您可以简单地使用下面的选择器来访问导航中的每个锚点时，将导航链接类添加到每个锚点是多余的。

然后我遍历您的导航锚点并删除活动类并将活动附加到单击的项目。

$(document).ready(function() {
        $(".navbar-nav li a").on('click', function (e) {

            $(".navbar-nav li").find('a').removeClass('active');
            $(this).addClass('active');
        });
});