使用jQuery重命名jQuery UI选项卡

时间:2011-05-29 21:24:55

标签: jquery jquery-ui

我有3个标签:

<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>

使用这个jQuery

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

我想在第一个和第三个选项卡上执行某些操作时,第二个选项卡的标签会将名称从“Tab2”更改为“其他文本”

我在Google上尝试了多种方式,但任何工作。

谢谢,

5 个答案:

答案 0 :(得分:5)

您可以运行以下代码,它将更改第二个标签链接的文本。

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

Example(点击第3个标签中的按钮)

答案 1 :(得分:2)

或者,对于想要更改特定标签文字的人,在这种情况下使用“#tabs-2”:

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

请注意,这取决于jquery-ui标签的当前格式,如果模板在将来的版本中发生更改,则可能需要进行调整。

答案 2 :(得分:1)

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

答案 3 :(得分:1)

对于有兴趣更改所选标签的文字的人:

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

答案 4 :(得分:1)

如果您不想使用索引,我找到了另一种解决方案。

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