Rename jQuery UI tab with jQuery

Question

I have 3 tabs:

<div id="tabs"> <ul> <li><a href="#tabs-1">Tab1</a></li> <li><a href="#tabs-2">Tab2</a></li> <li><a href="#tabs-3">Tab3</a></li> </ul> <div id="tabs-1"></div> <div id="tabs-2"></div> <div id="tabs-3"></div> </div> 

with this jQuery

 <script type="text/javascript"> $(document).ready(function () { var $tabs = $("#tabs").tabs({ select: function (e, ui) { } }); }); </script> 

I would like, when performing some operation on the first and third tabs, the label of the second tab changes its name from "Tab2" to "Other text"

I tried several ways to find on Google, but any work.

Thanks,

Answer 1

You can simply run the following code and it will change the text for the second tab.

 $('#tabs ul:first li:eq(1) a').text("Other text"); 

Example (click the button on the third tab)

Answer 2

Alternatively, for anyone who wants to change the text of a specific tab, "# tabs-2" in this case:

 $('#tabs [aria-controls=tabs-2] a span').text("New Label") 

Please note that this depends on the current formatting of jquery-ui tabs and may need to be changed if the template changes in future versions.

Answer 3

 $('#tabs ul li:nth-child(2) a').text('Other text'); 

Answer 4

For anyone interested in changing bookmark text :

$('#tabs .ui-tabs-selected a').text("New Title");

Answer 5

I found another solution if you do not want to use indexes in case they are dynamic.

 $('#tabs a[href=#idoftab]').text("New Title");