Add/Remove Class onClick Jquery

Question

I have looked at what seems to be a million examples of how to get the link a user clicks to change class, while ensuring the sibling links take their original class. I am very new to jQuery so admittedly I am lost when I try these different examples. Here is my css:

/*active link */
.current {
color: #f48239;
text-decoration: none;
}
/* inactive link*/
.link {
    color: black;
    text-decoration: none;

}

jQuery Function that only shows the div content that corresponds to the link being clicked:

 $(document).ready(function(){
    $('a').click(function () {
    var divname= this.name;
    $("#"+divname).show("fast").siblings().hide("fast");

    });

    });

And now the HTML:

        <div id="left">
            <UL><h2>DBACO Projects</h2></UL>
                    <div id="headerspace">
                    </div>              
            <UL ID="links"><LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="QualcommInfo">QUALCOMM BUILDING M PROJECTS</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="StFrancisInfo">ST FRANCIS OF ASSISI CATHOLIC &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;COMMUNITY-PHASE 1</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="YumaInfo">YUMA PIVOT POINT HOTEL AND &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONFERENCE CENTER</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="RealtyInfo">REALTY INCOME CORPORATE &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HEADQUARTERS</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="CenterCityInfo">CENTER CITY MARRIOTT</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="PalmInfo">PALM MOUNTAIN RESORT</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="TrailsInfo">THE TRAILS AT PALM SPRINGS</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="OtayInfo">OTAY LOGISTICS CENTER</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="CabrilloInfo">CABRILLO MEDICAL OFFICE BUILDING</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="NorthgateInfo">NORTHGATE COMMUNITY CHURCH</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="LomaInfo">LOMA ALTA VILLAGE MOB</A></h6></LI></UL>
        </div>

Any ideas on how to get the link clicked to take the class of "current" while ensuring all the other links stay with the class of "link" would be greatly appreciated.

I don't understand. Are you trying to hide and show content or change the CSS class name on the objects so that different CSS will have effect? — jfriend00
– jfriend00, Commented Apr 20, 2012 at 1:44

Matt Ball · Accepted Answer · 2012-04-20 01:44:26Z

4

$(document).ready(function() {
    var $links = $('a');
    $links.click(function () {
        $links.removeClass('current').addClass('link');
        $(this).removeClass('link').addClass('current');

        var divname= this.name;
        $("#"+divname).show("fast").siblings().hide("fast");
    });
});

answered Apr 20, 2012 at 1:44

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

1 Comment

user1345405 Over a year ago

Thank you for everyone for your replies. MДΓΓ БДLL, your answer worked perfectly. The hiding of the DIV was working, but the changing of the class was not. Thanks again for all of your replies and help!!!

Soe Moe · Accepted Answer · 2012-04-20 01:47:06Z

2

I am not sure why you apply "show" and "hide", but this might be what you want.

$(document).ready(function(){
    $('a').click(function () {
        $(this)
            .removeClass("link")
            .addClass("current")
            .siblings("a").removeClass("current");
    });
});

The code only does changing the css class.

Hope it helps.

answered Apr 20, 2012 at 1:47

Soe Moe

3,4381 gold badge25 silver badges33 bronze badges

1 Comment

user1345405 Over a year ago

Soe Moe, the show/hide is to show only one div of content on the right side of the page (which I did not show the code for). That was working fine, but I was needing to change the class of the one that was active at the time, and since it was a link to the same page the normal active did not seem to work. It looks like yours would have worked as well. Thank you for your reply!

Dylan Cross · Accepted Answer · 2012-04-20 01:45:49Z

1

I would suggest doing it this way: http://jsfiddle.net/3SR7E/

css:

.link.current {
color: #f48239;

}
.link {
color: black;
text-decoration: none;

}

javascript:

$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("fast").siblings().hide("fast");
$("#links li a").removeClass("current");               
    $(this).addClass("current");

});

});

answered Apr 20, 2012 at 1:45

Dylan Cross

6,01623 gold badges80 silver badges122 bronze badges

Comments

user1289347 · Accepted Answer · 2012-04-20 01:50:58Z

-1

here you go http://jsfiddle.net/gHWWX/4/

$(document).ready(function(){
    $('a').click(function () {
        $('a').removeClass('current').addClass('link');
        $(this).removeClass('link').addClass('current');
        var divname= this.name;
        $("#"+divname).show("fast").siblings().hide("fast");
    });
});

minor edit

edited Apr 20, 2012 at 1:50

answered Apr 20, 2012 at 1:44

user1289347

2,4071 gold badge14 silver badges16 bronze badges

4 Comments

Matt Ball Over a year ago

This is rather abysmal, style-wise.

user1289347 Over a year ago

You did the same thing, you just have the add and remove class functions on the same line, and you made a collection out of the 'a' tags.

jfriend00 Over a year ago

And, both of those changes make it a LOT more efficient. You were rebuilding a list of all links in the page twice on every click. He was using a prebuilt list. That's a meaningful difference. The advantage of chaining is that you don't re-evaluate the selector over and over.

user1289347 Over a year ago

I understand the idea of chaining, it was an example of code, and it was easier to read that way. But you are absolutely correct about the collection, I totally missed that. I'll remember that next time.

Collectives™ on Stack Overflow

Add/Remove Class onClick Jquery

4 Answers 4

1 Comment

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related