Rename jQuery UI tab with jQuery

问题

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,

回答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)

回答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.

回答3:

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

回答4:

For anyone interested in changing the text of the selected tab:

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

回答5:

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");

来源：https://stackoverflow.com/questions/6170517/rename-jquery-ui-tab-with-jquery

标签

jquery

jquery-ui