更改Kendo标签条文本会动态改变样式

I need to change the Tab text dynamically and I can do that but when I change the text, the design changes and it looks bad.

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

Here's what I've got:

这是我得到的:

$("#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>

Here's a Fiddle

这是一个小提琴

I don't know why is that screwed up after changing the text but what I need is to change the text without affecting anything else.

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

1 个解决方案

#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>'); 
}

you need add one more

你需要再添加一个

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

Update:

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>');
}