Add class to "a tag" after click on it, when go to target page. with jQuery-CodePudding

Let's say we have the HTML code snippet at the bottom of this page.

The first option, "All" has the "active" class. Suppose now you click on the link related to "News" and go to that page.

Now I want to add "active" class to "a" tag of "News" in opened page.

.page-nav-section {
     padding: 4rem 0 1rem 0;
}

.page-nav-section ul li {
    margin-left: 3rem;
    list-style: none;
}
.d-flex.align-items-center {
    display: flex;
}
 .page-nav-section ul li a.active {
     color: #7F1730;
     border-bottom: 2px solid #7F1730;
}
 .page-nav-section ul li a {
     font-size: 15px;
     font-weight: 600;
     padding: 0.2rem 0.5rem;
}
 .page-nav-section ul li a:not(.active):after {
     content: "";
     display: block;
     border-bottom: 2px solid #7F1730;
     width: 0;
     position: relative;
     right: 0;
     -webkit-transition: 0.3s ease-in-out;
     transition: 0.3s ease-in-out;
}
 .page-nav-section ul li:hover a:not(.active):after {
     width: 100%;
   color: #7F1730;
}
  .page-nav-section ul li:hover a:not(.active) {

   color: #7F1730;
}
 a{
 text-decoration: none ;
 color: #555;
 }

    <div >
        <ul >
          <li><a href="#" >All</a></li>
          <li><a href="#">Games</a></li>
          <li><a href="#">Apps</a></li>
          <li><a href="#">News</a></li>
        </ul>
    </div>

CodePudding user response：

One way is to do listen on click event,remove active class on all a element and then add active class on the current element.

If you want to active to the new opened page,you need to pass on parameter on the href attribute and on the new opened page check if it contains the specified parameter.

$(function(){
  $('ul > li > a').on('click',function(){
    $('li > a').removeClass('active');
    $(this).addClass('active');
  })
})

.page-nav-section {
     padding: 4rem 0 1rem 0;
}

.page-nav-section ul li {
    margin-left: 3rem;
    list-style: none;
}
.d-flex.align-items-center {
    display: flex;
}
 .page-nav-section ul li a.active {
     color: #7F1730;
     border-bottom: 2px solid #7F1730;
}
 .page-nav-section ul li a {
     font-size: 15px;
     font-weight: 600;
     padding: 0.2rem 0.5rem;
}
 .page-nav-section ul li a:not(.active):after {
     content: "";
     display: block;
     border-bottom: 2px solid #7F1730;
     width: 0;
     position: relative;
     right: 0;
     -webkit-transition: 0.3s ease-in-out;
     transition: 0.3s ease-in-out;
}
 .page-nav-section ul li:hover a:not(.active):after {
     width: 100%;
   color: #7F1730;
}
  .page-nav-section ul li:hover a:not(.active) {

   color: #7F1730;
}
 a{
 text-decoration: none ;
 color: #555;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
        <ul >
          <li><a href="#" >All</a></li>
          <li><a href="#">Games</a></li>
          <li><a href="#">Apps</a></li>
          <li><a href="#">News</a></li>
        </ul>
    </div>

CodePudding user response：

I found a great easy solution, I put the jQuery code here.

jQuery(document).ready(function($){
    // Get current url
    var url = window.location.href;
    // Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
    $('.menu a[href="' url '"]').addClass('current_page_item');
});