Why Highlight Menu Item Doesn't Work in ASP.NET MVC?
I am testing the method for highlighting the selected menu item in a MVC program.
The test environment include: 1)ASP.NET core with MVC (using .NET 5) 2) Bootstrap V4.6
First, I created a small html file just for testing the "hightlight" mehtod with bootstrap with JQuery. (see html file content below). This html page works fine. It changes the text color to red for the active menu item.
Second, I created an ASP.NET core MVC project. In the _layout.cshtml file, I also use the bootstrap 4 and same JQuery script intended to highlight the active menu item. The top menu has same bootstrap classes for various navbar components. But, it does not work at all. (see content of _layout.cshtml at the very end of this post.) Why the "hightlight" doesn't work in MVC and how can I fix it.
HTML PAGE for testing
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<!-- <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous" />-->
<!-- Bootstrap CSS file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Font Awesome library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"> </script>
<style>
.font-bold {
font-weight: bolder;
}
</style>
<title>Active Link font color using jquery</title>
</head>
<body>
<!-- <nav > -->
<nav >
<div >
<a >Testing</a>
<div >
<ul >
<li >
<a href="#">
Home
</a>
</li>
<li >
<a href="#">
Product
</a>
</li>
<li >
<a href="#">
Order
</a>
</li>
<li >
<a href="#">
Shipping
</a>
</li>
<li >
<a href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript">
$(document).ready(function () {
$("ul.navbar-nav > li > a").click(
function (e) {
$("ul.navbar-nav > li").removeClass(
"active");
$("ul.navbar-nav > li > a").css(
"color", "");
$(this).addClass("active");
$(this).css("color", "red");
});
});
</script>
</body>
</html>
_layout.cshtml in MVC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - MVCWebUI</title>
@*<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />*@
<!-- Bootstrap CSS file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Font Awesome library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul.navbar-nav > li > a").click(
function (e) {
$("ul.navbar-nav > li").removeClass(
"active");
$("ul.navbar-nav > li > a").css(
"color", "");
$(this).addClass("active");
$(this).css("color", "red");
});
});
</script>
</head>
<body>
<header>
<nav >
<div >
<a asp-area="" asp-controller="Home" asp-action="Index">MVCWebUI</a>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div >
<ul >
<li >
<a asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li >
<a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li >
<a asp-area="" asp-controller="Home" asp-action="Privacy">Product</a>
</li>
<li >
<a asp-area="" asp-controller="Home" asp-action="Privacy">Order</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div >
<main role="main" >
@RenderBody()
</main>
</div>
<footer >
<div >
© 2022 - MVCWebUI - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
CodePudding user response：
$(this) in this context is referring to the clicked element which is the anchor element.
As such you are adding the active class to the anchor element and I think it needs to be on the list item element. I think you also need to prevent the default link click events,something like:
<script type="text/javascript">
$(document).ready(function () {
$("ul.navbar-nav > li > a").on("click", function (e) {
e.preventDefault();
var link = $(this);
$("ul.navbar-nav > li").removeClass("active");
link.parent().addClass("active");
});
});
</script>
Put an example here for you: https://codepen.io/treefishuk/pen/zYPKapP