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 set background gradient css via javascript [duplicate]

    Best practice: How to use (repeat) CSS style attributes correctly?

    How to horizontally center text in bootstrap button?

    Modernizr: how do I detect CSS display:table-cell support?

    how to flip the div using css?

    How to implement block style for list

    How do I go about dynamically splitting a body of text into two even columns with plain Javascript (no JQuery)?

    Bootstrap - how to remove hover effect from collapsed navbar only?

    CSS/HTML how not to overlap fixed header

    CSS/HTML : how to make something become absolute positioned once you scroll by it

    How to make a div fall on hover and stay at at the bottom of the page using jquery or css?

    How to bring parent div front?

    How can I append the images from this JSON file properly into the correct divs

    How can I apply a css transition to an element when its parent is hovered?

    How to highlight a window in JavaFX?

    How to preload css :hover background images

    How to make the CSS “~” selector work in GWT Css Resource

    How to customize devise login and signup forms created using the simple_form gem?

    How to make a smooth transition for css controlled by jQuery?

    How to rotate a div, while jQuery animates the same div

    How to apply a CSS gradient over a text, from a transparent to an opaque colour

    How to position div which contains font-awesome icons to centre of another div?

    How to make value text in form be italic

    How to apply “-webkit” css rules using jquery .css

    How can I indent all text in a paragraph except the first line?

    How to use Javascript to get a visitors monitor resolution?

    How do I use CSS to reposition this image?

    How to set Safari print margins via CSS to print borderless

    How do I change the last textual node child in JavaScript

    How do i set 100% in a div tag background?