Question 36419 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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 class="page-nav-section section hide-md-and-down">
        <ul class="d-flex align-items-center">
          <li><a href="#" class="active">All</a></li>
          <li><a href="#">Games</a></li>
          <li><a href="#">Apps</a></li>
          <li><a href="#">News</a></li>
        </ul>
    </div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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');
});

  2. 0

    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 class="page-nav-section section hide-md-and-down">
        <ul class="d-flex align-items-center">
          <li><a href="#" class="active">All</a></li>
          <li><a href="#">Games</a></li>
          <li><a href="#">Apps</a></li>
          <li><a href="#">News</a></li>
        </ul>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search