How to add a “selected” class to a selected tab anchor using jQuery UI Tabs?

Question

I'm using jQuery UI tabs(). It adds "ui-tabs-selected" to the selected LI, but each LI has an ID because it's different. Due to the multi ID/class bug in IE6, I need to apply a "selected" class to the anchor that is inside the "ui-tabs-selected" LI.

Can someone tell me how to do this?

Answer 1

you can do

$('li.ui-tabs-selected a').addClass('yourclass');

To manually add a class to any of the tabs you can do assuming your ul has the id #tabs

$('#tabs li a').eq(1).addClass('yourclass'); //this will add class to second tab

Updated Answer Use the select event to trigger addClass()

$('#wrap').tabs({
    select: function(event, ui) {
        $(this).find('li a').removeClass('myclass').eq(ui.index).addClass('myclass')
    }
});

Check working example at http://jsfiddle.net/6JryL/

Answer 2

$('.ui-tabs-selected a').addClass('selected');