javascript - bootstrap 4 .active 类在点击时不会改变
问题描述
我在 ASP.NET MVC 核心网站中使用 bootstrap v4.3.1。我有一个导航栏,其中第一个 li 的 a 标签上有 .active 类:
<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 项目后,活动类不会更改。它停留在第一个 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>
编辑:当我查看浏览器中的元素时,当我单击第二个时,我可以看到活动类已从第一个 li 项目中删除,但随后我看到它再次自动添加到第一个 li 项目中。好像它刷新什么的。 preventDefault()”,其中“e”用于 a 标签。但它不适用于 .active 类。
$(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 以来已经有一段时间了。我没有看到我做错了什么。有小费吗?
解决方案
请试试这个。我在 css 中参加活动课程只是为了演示目的,您可以使用自己的课程。谢谢
$(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>
推荐阅读
- javascript - 如何单击一个点并将其坐标保存在 Leaflet 中?
- azure - Azure 数据工厂 - 休息复制活动附加标头不起作用
- google-cloud-platform - Terraform GCP - 参数在 windows-startup-script-ps1 中传递
- c# - 如何在 ScheduledTask 继承中实现依赖关系 (Telerik Sitefinity)
- kotlin - Mockito 如何测试在方法内创建的实例是否正在调用方法
- javascript - Javascript 代码在 JsFiddle 上工作,但在我的主机上不工作
- ruby-on-rails - 使用 Rails 6.1 应用程序在 Circle CI 上获得“未找到示例”
- python - TD Amertirade API 价格历史 - json 字符串返回
- android - Android - 从原生 android 应用程序调用 whatsapp 业务短链接时出现错误“QR 码不再有效”(仅在某些设备上)
- mongodb - 为什么 MongoDB 中的 Oplog 需要将多个更新转换为单个操作以保持幂等性?