Adding active class to link via jQuery [duplicate]

Question

I am quite new here and to jQuery but I have searched the related questions in stackoverflow but none is solving my problem. I have this code:

Html:

<div class="menu">
    <div class="menu-items">
       <ul class="nav">
         <li class="var_nav">
            <a href="../home.php">Home</a>
         </li>
         <li class="var_nav">
            <a href="../portfolio.php">Porfolio</a>
         </li>
         <li class="var_nav">
            <a href="../dashboard.php">Dashboard</a>
         </li>
         <li class="var_nav">
            <a href="../users.php">Users</a>
         </li>
       </ul>
    </div>
</div>

CSS

.nav li.active {
    background-color: #048abb;
}
.nav li.active a {
    color: #fff;
}

I want to apply class .active to the clicked(current/active) link so that the css can take effect. Any suggestions on how to apply the class to obove html code via jQuery?

This has been answered many times previously i.e. stackoverflow.com/questions/19520446/… — DAC84
– DAC84, Commented Jul 28, 2015 at 14:58

jmar777 · Accepted Answer · 2015-07-28 14:53:08Z

1

var $links = $('.nav a').on('click', function(e) {
    e.preventDefault();

    $links.removeClass('active');
    $(this).addClass('active');
});

answered Jul 28, 2015 at 14:53

jmar777

39.8k11 gold badges68 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zollo Over a year ago

jmar777 The obove code renders the links unresponsive

jmar777 Over a year ago

@Zollo well, if you're planning on following the links, why would you mess with the classnames? If the links actually perform navigation, you'd want to set the classnames server-side.

Plummer · Accepted Answer · 2015-07-28 14:56:19Z

0

$(document).ready(function(){
    $('.nav').on('click', 'a', function(e) {
        e.preventDefault();
        $('.active).removeClass('active');
        $(this).addClass('active');
    });
});

answered Jul 28, 2015 at 14:56

Plummer

6,71813 gold badges49 silver badges79 bronze badges

Comments

user4024288 · Accepted Answer · 2015-07-28 14:58:04Z

0

As the CSS seems to address the "active" class being applied to the LI elements, this should do the trick:

$(document).ready(function() {

    $('.nav a').click(function(e) {

    //optional - override the link - uncomment the following line:
    //e.preventDefault();

    //remove the active class from all li elements
    $('.nav li').removeClass('active');

    //add it to the li element holding the clicked link
    $(this).parent('li').addClass('active');

    });

});

answered Jul 28, 2015 at 14:58

user4024288

1204 bronze badges

Collectives™ on Stack Overflow

Adding active class to link via jQuery [duplicate]

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related