Question

I need to adjust the CSS of one element when a tab is clicked if a particular class (‘current’) is present. The class ‘current’ is added when the tab is clicked. The code I have works, but it takes two clicks – I think because on the first click, the class is added and then on the second, jQuery detects it. Here’s the jquery code:

    $('ul.tabs a').click(function() {
     if($('a#tab5').hasClass('current')) {
        $('#rightCorner').css("top","1px");
     } else {
        $('#rightCorner').css("top","7px");
     };
})

Is there a way to get it to work with one click?

Thanks – Joe

Answer 1

Can you combine the code that adds the current class and this click handler that monitors tab5? This allows you to add the class and then perform the check. The order of operations is going wrong in your case.

$('ul.tabs a').click(function() {     
     $('ul.tabs a').removeClass('current');
     $(this).addClass('current');
     if (this.id == 'tab5') {
          $('#rightCorner').css("top","1px");
     }
     else {
          $('#rightCorner').css("top","7px");
     }
})

Update:

Probably easier to just handle tab 5 using CSS instead of the if statement.

ul.tabs a#tab5 { top: 7px; }
ul.tabs a#tab5.current { top 1px; }