CODEWITHSUNDEEP
javascriptjqueryhtml
Jake Martinez
Jake Martinez

Reputation: 55

Changing tabs with jQuery

I'm attempting at changing the background color of the td's on click. This is what I currently have for JavaScript:

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

This is what I have for the HTML: 

    <div id="leftHoldNav">
    <center>
    <table cellpadding="0" cellspacing="0">
    <tr>
        <td onclick="loadPage('../about/info.php','#mainWrapLoad','../about/')" class="highlight">Info</td>
        <td onclick="loadPage('../about/kcintl.php','#mainWrapLoad','../about/')" class="">KC Int'l</td>
        <td onclick="loadPage('../about/board.php','#mainWrapLoad','../about/')" class="">Board</td>
        <td onclick="loadPage('../about/dcon.php','#mainWrapLoad','../about/')" class="">D-Con</td>
    </tr>
    </table>
    </center>
    </div>

It's not working, anybody have an idea why?

Upvotes: 1

Views: 89

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

http://jsbin.com/inogov/1/edit

you don't need to go back to parent, stay on the siblings.

$this.siblings('td').removeClass('highlight');

There you go:

$('#leftHoldNav table td').click(function(){
    var $this = $(this);
    $this.addClass('highlight').siblings('td').removeClass('highlight');
});

Upvotes: 4

Related Questions