How do I remove a CSS class from one anchor and assign it to another using jquery?


Tags: jquery,anchor,css

Problem :

Here are my anchors,

<a ID="lnkbtn0" class="page-numbers" href="#">1</a>
<a ID="lnkbtn1" class="page-numbers" href="#">2</a>
<a ID="lnkbtn2" class="page-numbers" href="#">3</a>
<a ID="lnkbtn3" class="page-numbers" href="#">4</a>

And my click function i am adding a cssclass to show that it is the current anchor

$("a.page-numbers").click(function() {
                $(this).addClass('page-numbers current');
    });

What happens is when i click the next anchor the same class has been added to the current and the previous anchor... What can be done to remove the cssclass page-numbers current and assign cssclass page-numbers to the previous/all other anchors without changing the current one....



Solution :

To avoid a costly run through the entire dom, do this:

$("a.page-numbers").click(function() {
    $(this).addClass('current').siblings().removeClass('current');
});

    CSS Howto..

    How to keep image position despite window/device size?

    In Ember how to use a view to change a css property and then view it?

    How to call a image class on a regular interval

    How to decrease the width of this div so that another div can come next to it?

    how to arrange divs with css as a grid?

    How do I enable scrolling only in one direction in CSS?

    How to trigger self hover on child element

    How to change CSS according to user Operating System

    How can I center align the list horizontally?

    How to right and left align every alternate list item in html and css along with the bullets

    How to get rid of the white vertical stroke after every repeating background image done with repeat-x value in CSS?

    CSS: How to target a specific cell inside a table?

    How Do I Add CSS Class to body Element in Meteor?

    How to get correct overflow for proper div with fixed footer?

    How to use css selector with “not” in c#?

    Entire window becomes blur after a modal is shown jQuery why?

    How to start different elements on different keyframes of an animation in CSS

    How can I add spaces between two lines using CSS?

    How to limit a table cell to one line of text using CSS?

    How to change font color of select2 control using css

    How to implement CSS file style on selected div

    How do I create an oval around text in CSS?

    How to Change CSS of Custom Template JointJS Element?

    How to delete the gap

    How can I get the current state of my div animation?

    How to use particular CSS styles based on screen size / device

    How to make CSS for HTML5
    work properly in IE?

    How do I make these HTML blocks of info stay the same size?

    How to animate two divs in html / css to make a semi-circle transition?

    How to use Bootstrap 3 gradient for background in CSS? [closed]