Can't get active link highlight on the menu-CodePudding

I have simple menu but I'm unable to highlight the active menu item when browsing the site.

The code is

<div >
  <div >
    <a href="#">Home</a>
    <a href="#">Us</a>
    <a href="#">Contact</a>
  </div>
</div>

CSS

.topnav a {
  float: left;
    margin-right: 15px;
    display: inline-block;
    padding: 10px 20px;
    background: #1d297b;
    border: 1px solid #1d297b;
    border-radius: 10px;
    font-size: 16px;
    font-family: "Luxia-Display";
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
}
.topnav a:hover, .topnav a.active {
    color: #000 !important;
    border-color: #dacd9d !important;
    background-color: #fff !important;
}

And JS part

$('.topnav .topnav-centered a').on('click', function() {
   $('.topnav .topnav-centered a').removeClass();
    $(this).addClass('active');
});

Here is the fiddle that I have created for showcase: Fiddle

CodePudding user response：

Just add jQuery
The error Uncaught ReferenceError: $ is not defined means that no jQuery is present.

$('.topnav .topnav-centered a').on('click', function() {
   $('.topnav .topnav-centered a').removeClass();
    $(this).addClass('active');
});

.topnav a {
  float: left;
    margin-right: 15px;
    display: inline-block;
    padding: 10px 20px;
    background: #1d297b;
    border: 1px solid #1d297b;
    border-radius: 10px;
    font-size: 16px;
    font-family: "Luxia-Display";
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
}
.topnav a:hover, .topnav a.active {
    color: #000 !important;
    border-color: #dacd9d !important;
    background-color: #fff !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <a href="#">Home</a>
    <a href="#">Us</a>
    <a href="#">Contact</a>
  </div>
</div>

CodePudding user response：

You are adding a class active to your link when you are clicking it, so your active class selector should be .topnav a.active

In you Fiddle, you have marked the active state using .topnav a:hover, .topnav a:active which is incorrect

$(".topnav .topnav-centered a").on("click", function () {
  $(".topnav .topnav-centered a").removeClass();
  $(this).addClass("active");
});

.topnav a {
  float: left;
  margin-right: 15px;
  display: inline-block;
  padding: 10px 20px;
  background: #1d297b;
  border: 1px solid #1d297b;
  border-radius: 10px;
  font-size: 16px;
  font-family: "Luxia-Display";
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
}
.topnav a:hover,
.topnav a.active {
  color: #000 !important;
  border-color: #dacd9d !important;
  background-color: #fff !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div >
  <div >
    <a href="#">Home</a>
    <a href="#">Us</a>
    <a href="#">Contact</a>
  </div>
</div>

CodePudding user response：

Based on your Fiddle, your JS function is adding the active class but you don't have an active class in your CSS. Make sure to add that class and additional properties needed. Something as simple as:

$(".topnav .topnav-centered a").click(function() {
  $(this).addClass('active')
  $(this).siblings().removeClass('active')
})

.topnav a {
  float: left;
  margin-right: 15px;
  display: inline-block;
  padding: 10px 20px;
  background: #1d297b;
  border: 1px solid #1d297b;
  border-radius: 10px;
  font-size: 16px;
  font-family: "Luxia-Display", sans-serif;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
}

.topnav a:hover {
  color: #000 !important;
  border-color: #dacd9d !important;
  background-color: #fff !important;
}

a.active {
  color: #000 !important;
  border-color: #dacd9d !important;
  background-color: #fff !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div >
  <div >
    <a href="#">Home</a>
    <a href="#">Us</a>
    <a href="#">Contact</a>
  </div>
</div>