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'd like when I do some operation on the first and the third tab, the label of second tab change the name from "Tab2" to "Other text"

I tried several way found on Google but any work.

Thanks,

Answer 1

You could just run the following code and it will change the text for the second tab link.

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

Example (click button in 3rd tab)

Answer 2

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

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

Note that this is dependent on the current formatting of the jquery-ui tabs and may need to be tweaked if the template changes in future versions.

Answer 3

I found another solution if you don't want to use the indices in case they are dynamic.

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