jQuery - adding and removing classes

Question

I'm trying to make it so that there is a default tab, and when another is clicked, it takes the class off of that tab and onto the one that is clicked.

Here's the HTML that I have:

<div id="rightWrap">
    <div id="headStep"><span class="titleSub">Workers</span></div>
    <center>
    <br>
    <a href="../about/?s=architect"><table class="highlight">
    </table></a>
    <br>
    <a href="../about/?s=broker"><table class="">
    </table></a>
    <br>
    <a href="../about/?s=operator"><table class="">
    </table></a>
    <br>
    <a href="../about/?s=consultant"><table class="">
    </table></a>
    </center>
</div>

And the JavaScript:

$(document).ready(function() {
    $('#rightWrap a table').click(function(){
    $(this).addClass('highlight').siblings().removeClass('highlight');
});
});

Ram · Accepted Answer · 2012-08-24 07:46:50Z

4

Your tables are not siblings.

$(document).ready(function() {
    $('#rightWrap a table').click(function(){
        var $this = $(this);
        $this.parent().siblings('a').find('table').removeClass('highlight');
        $this.addClass('highlight');     
    });
});

Note that if the doctype of the page is not HTML5, wrapping the tables with <a> elements makes your document invalid.

edited Aug 24, 2012 at 7:46

answered Aug 24, 2012 at 3:59

Ram

145k16 gold badges174 silver badges201 bronze badges

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

3 Comments

Ram Over a year ago

@JohnConde Thanks for the edit, but there is no difference between the edited code and the original one.

jfriend00 Over a year ago

In HTML5, it's perfectly legal to wrap a block level element (like a table) with an <a> tag and many browser have allowed this for awhile. The empty tables are what make no sense to me.

Ram Over a year ago

@jfriend00 Yes, I know it's legal in HTML5, I think table tags have their on markup and OP hadn't posted them for brevity.

jfriend00 · Accepted Answer · 2012-08-24 04:25:40Z

1

I think you can simplify it to this;

$(document).ready(function() {
    $('#rightWrap a table').click(function(){
        $('#rightWrap').find('.highlight').removeClass('highlight');
        $(this).addClass('highlight');     
    });
});

Your HTML also needs some serious work. Why the empty tables?

edited Aug 24, 2012 at 4:25

answered Aug 24, 2012 at 4:23

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Collectives™ on Stack Overflow

jQuery - adding and removing classes

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related