1

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>
Ali Shams
  • 143
  • 15
  • 1
    When you clicked to create this post the button said "Ask Question". But "I want" or "I need" is not a question, or a problem statement. And "how to" is a bit too vague. This site is not a free write-my-code, design-my-solution or do-my-thinking service. We'll _help_ you with your attempt to solve your problem / implement your requirement. What research have you done? What code have you tried? What exact issue(s) are you facing? Please read [ask] for further guidance on how to ask a useful question. Thanks. – ADyson Oct 05 '22 at 09:41

2 Answers2

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>
flyingfox
  • 13,414
  • 3
  • 24
  • 39
  • I need exactly this part "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." How can I do this? I need to add class "active" to link in opened page. – Ali Shams Oct 05 '22 at 10:17
  • @AliShams such as `href=newpage?active=true` and in the new page get url parameters via [get-the-values-from-the-get-parameters-javascript](https://stackoverflow.com/questions/979975/get-the-values-from-the-get-parameters-javascript) – flyingfox Oct 05 '22 at 10:19
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');
});
Ali Shams
  • 143
  • 15