jquery ui tabs change selected tab text

Question

the following doesn't work:

$("#tabs").tabs( "option", "selected" ).text('Logout');

neither is

$("#tabs").tabs( "option", "selected" ).text()='Logout';

with error:

$("#tabs").tabs("option", "selected").text is not a function

how do i change text of a tab please?

Answer 1

The code you are using returns an integer value for the selected tab. Its not an object that has a text() method on it. You will have to do something like this:

var selectedTab = $("#tabs").tabs( "option", "selected" );
$("#tabs ul li a").eq(selectedTab).text("your text");

Documentation here - http://jqueryui.com/demos/tabs/#option-selected

Sample code here - http://jsbin.com/ohogey/edit#javascript,html

Hope this helps!

Answer 2

You will need to use the select event on the jQuery Tabs element. Inside the function just find your DOM element and change the innerText value.

$( ".selector" ).tabs({
   select: function(event, ui) { ... }
});

Answer 3

$("#tabs").tabs("option", "selected")

return the selected tabs ID.
If you want to change the caption of the tab when it is selected,
you can do it like this

$('#tabs').tabs({
  select: function(e, ui) {
    $(ui.tab).text('someText');
  }
});