javascript - 更改 Kendo 选项卡条文本会动态改变样式

Question

我需要动态更改选项卡文本，我可以这样做，但是当我更改文本时，设计会发生变化并且看起来很糟糕。

这是我所拥有的：

$("#tabstrip").kendoTabStrip({
    select: tabstrip_select
});

function tabstrip_select(e) {
    var x = e.item;
    $(x).text($(x).text() + ' - plus changed text');
    //alert('Tab text: ' + $(x).text());    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet"/>   
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="tabstrip">
    <ul>
        <li>Online</li>
        <li>Trading</li>
        <li>Whatever</li>
    </ul>
    <div style="min-height:350px;"></div>
    <div style="min-height:350px;"></div>
</div>

这是一个小提琴

我不知道为什么在更改文本后搞砸了，但我需要的是在不影响其他任何内容的情况下更改文本。

Answer 1

function tabstrip_select(e) {
    $('#tabstrip ul li .k-link .plusText').remove();
    $(e.item).find('.k-link').append('<span class="plusText"> - plus changed text</span>'); 
}

你需要再添加一个

<div style="min-height:350px;"></div>

更新：

function tabstrip_select(e) {
    var tab = $('#tabstrip ul li .k-link:contains("Online")');
    tab.find('.plusText').remove();
    tab.append('<span class="plusText"> - selected '+$(e.item).find('.k-link').text()+'</span>');
}