Jquery Tabs - Change css depending on a specific tab

Question

So, I am working in this page

http://universidadedoingles.com.br/text-tabs/tabs-text.html

As you guys can see, I have four tabs and an arrow right below, I need to do that the arrow go below the selected tab, if a click on tab 3, that arrow should go below tab 3, simple as that! but I don`t know!

You also can see that when the page loads on tab 1 and you click on tab 2 the effect I want works pretty well, here`s the jquery I am using for that:

        $(document).ready(function() {
            $("a.tab2").click(function() { 
                $(".arrow-spacer").addClass("tabs2");
            });
    });

That`s it, thank you vey much for any kind of help. pS - i am using a mac, so theres no IE for testing yet, this looks good in Safari and Chrome.

Answer 1

If you look at the CSS for tabs1 & tabs2 the only difference is the left margin. So You can just adjust the left margin property:

Current CSS:

.tabs1 {
    background-image: url('up-arrow.png'); !important
    background-repeat: no-repeat;
    width:35px;
    height: 17px;
    margin: -16px 0px 0px 10px; 
}

.tabs2 {
    background-image: url('up-arrow.png'); !important
    background-repeat: no-repeat;
    width:35px;
    height: 17px;
    margin: -16px 0px 0px 90px;
    /*position: absolute;*/
/*  border: 2px solid green;*/
}

Changing the left margin based on the tab selected:

$('#tabs').bind('tabsselect', function(event, ui) {
    var leftMargin = "16px";
    switch(ui.index)
    {
      case 0:
        leftMargin = "16px";
        break;
      case 1:
        leftMargin = "90px";
        break;
      case 2:
        leftMargin = "164px";
        break;
      case 3:
        leftMargin = "238px";
        break; 
    }
 $(".arrow-spacer").css("margin-left",leftMargin);
});

Answer 2

You have a couple of options here.

I'd alter the CSS class already used by the JQuery Tabs: .ui-tabs-selected

Or try some javascript like this:

$(document).ready(function() {
  $('#tabs ul li a').click(function() {
    // remove class 'tabs2' if its been set at all.
    $('#tabs ul li a').removeClass('tabs2');
    // add class 'tabs2' to the clicked element.
    $(this).addClass('tabs2');
  });
});