bootstrap 4 .active class 点击时不改变

Question

我在 ASP.NET MVC 核心网站中使用 bootstrap v4.3.1。我有一个导航栏，其中第一个 li 的 a 标签上有 .active class:

<nav class="navbar navbar-expand-md navbar-toggleable-md navbar-dark bg-navbar fixed-top mb-3">
  <div class="container">
    <a
      class="navbar-brand"
      asp-area=""
      asp-controller="Home"
      asp-action="Index"
    >
      <img id="nav-logo" src="~/Images/LOGO's.png" alt="G&Z Installation" />
    </a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target=".navbar-collapse"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse d-md-inline-flex flex-md-row-reverse">
      <ul class="nav ml-auto">
        <li class="nav-item">
          <a
            class="nav-link active text-light nav-text"
            asp-area=""
            asp-controller="Home"
            asp-action="Index"
          >
            Home
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link text-light nav-text"
            asp-area=""
            asp-controller="Home"
            asp-action="SolarPanels"
          >
            Zonnepanelen
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link text-light nav-text"
            asp-area=""
            asp-controller="Home"
            asp-action="AircoAndHeatPump"
          >
            Airco & Warmtepomp
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link text-light nav-text"
            asp-area=""
            asp-controller="Home"
            asp-action="Contact"
          >
            Contact
          </a>
        </li>
        @*
        <li class="nav-item">
          <a
            class="nav-link text-light"
            asp-area=""
            asp-controller="Home"
            asp-action="Privacy"
          >
            Privacy
          </a>
        </li>
        *@
      </ul>
    </div>
  </div>
</nav>;

我添加了这段代码：

$(document).ready(function () {
  $("a.nav-link.text-light.nav-text").on("click", function () {
    $(".nav").find(".active").removeClass("active");
    $(this).addClass("active");
  });
});

单击其他 li 项目后活动 class 没有改变。它停留在第一个 li 项目上。 Bootstrap加载在布局页的头部：

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />

并在布局页面底部加载脚本：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

编辑：当我查看浏览器中的元素时，当我单击第二个时，我可以看到活动 class 已从第一个 li 项目中删除，但随后我看到它再次自动添加到第一个 li 项目中。作为如果它刷新什么的.. 如果我编辑 js 代码（和 li 项上的 .active class 而不是 a 标签），它可以工作，但是导航不再工作了。这是因为“e.preventDefault()" 其中“e”代表 a 标签。如果没有，它将不适用于 .active class..

$(document).ready(function () {
$('.nav li a').click(function (e) {

    $('.nav li.active').removeClass('active');

    var $parent = $(this).parent();
    $parent.addClass('active');
    e.preventDefault();
});});

自从我使用 bootstrap 和 asp.net mvc 以来已经有一段时间了。我没有看到我做错了什么。有什么建议吗？

Answer 1

请尝试 this.I 在 css 中激活 class 仅用于演示目的，您可以使用自己的 class.Thanks

$(document).ready(function () {
$("a.nav-link").on("click", function () {
$("a.nav-link").each(function(i,o)
{
$(this).removeClass("active");
});
    $(this).addClass("active");
})
});

.active {
  background-color: #666;
  color: white;
}

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-md navbar-toggleable-md navbar-dark bg-navbar fixed-top mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">
                <img id="nav-logo" src="~/Images/LOGO's.png" alt="G&Z Installation" />
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-md-inline-flex flex-md-row-reverse">
                <ul class="nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link active text-light nav-text" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light nav-text" asp-area="" asp-controller="Home" asp-action="SolarPanels">Zonnepanelen</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light nav-text" asp-area="" asp-controller="Home" asp-action="AircoAndHeatPump">Airco & Warmtepomp</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light nav-text" asp-area="" asp-controller="Home" asp-action="Contact">Contact</a>
                    </li>
                    @*<li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>*@
                </ul>
            </div>
        </div>
    </nav>
    </body>
    </html>

Answer 2

感谢 the answer of Jon here 我找到了解决方案！！！ :) 我把JS代码改成了：

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); 
});

现在可以正常使用了:)

bootstrap 4 .active class 点击时不改变

bootstrap 4 .active class not changing on click

html

javascript

css

asp.net-core-mvc

bootstrap-4