Been researching this for about 4 hours now, but I apologize if I've missed wherever this has been asked/answered before.
jsFiddle: http://jsfiddle.net/3Rx3j/3/
I have a box of automatically rotating tabs. The box has a navigator section and a content section. The list of tab buttons is in the navigator section while the divs they link to are in the content section. The tab buttons contain radio buttons that I want to be able to check when the associated content div is selected. The following lines of code are directly related to my problem:
//$(".ui-tabs-selected > .ui-tabs-nav-item").attr("checked", "checked");
$(ui.panel).children(".ui-tabs-nav-item").attr("checked", "checked");
alert($(ui.panel).attr("id"));
The commented line above almost does what I want. Unfortunately, when the "tabsselect" event fires, the ".ui-tabs-selected" class has not yet moved to the actual tab being selected, so it's always one step behind. Based on research I tried the 2nd line above, which returns the id of the content portion of the tab in a div in the content pane.
Is there a way to select the actual button that is clicked to fire the "tabsselect" event, instead of the container of the associated content?
Thanks for reading.
Brandon
You've given your radio buttons ids, so you can simply do the following:
$("#headlines").bind("tabsselect", function(event, ui) {
var index = ui.index + 1;
$('#radioNav' + index).attr('checked', true);
});
The callback includes the index of the current tab (zero based) so in your case it will either 0, 1, 2 or 3. This is accessed via ui.index. Simply concatenate this number with 'radioNav' and set its checked value to true. This automatically sets the others to false as only one can only ever be selected at any one time.
Demo: http://jsfiddle.net/3Rx3j/35/
Edit: Or nicer, select the nth radio button with the class you've given them:
$("#headlines").bind("tabsselect", function(event, ui) {
$('.ui-tabs-nav-item:eq(' + ui.index + ')').attr('checked', true);
});