如何在激活和重置时交换jQuery选项卡标签?

无可否认,我只是在学习jQuery。我试图寻找这个,但在用尽了我可能的研究途径后,我担心我会让我的问题变得更糟。

简单地说,我正在尝试将jQuery用于选项卡。当选中每个选项卡时,我想更改它的文本标签。当折叠或选择另一个选项卡时,返回到其原始形式。

我已经能够将标签更改为新的id,如上所示 JSFiddle 但它实际上将标签更改为实际的id名称。

<div id="tabs">
<ul>
    <li><a href="#tab1" id="tab1-label-link">
        <span id="tab1-label">Label 1</span></a>
        <span id="close-tab1-label" class="no-display">Tab Close</span>
    </li>
    <li><a href="#tab2" id="tab2-label-link">
        <span id="tab2-label">Label 2</span></a>
        <span id="close-tab2-label" class="no-display">Tab Close</span>
    </li>
    <li><a href="#tab3" id="tab3-label-link">
        <span id="tab3-label">Label 3</span></a>
        <span id="close-tab3-label" class="no-display">Tab Close</span>
    </li>
</ul>
<div id="tab1" class="tab-content">Information 1</div>
<div id="tab2" class="tab-content">Information 2</div>
<div id="tab3" class="tab-content">Information 3</div>

这是我目前的jQuery。

$(document).ready(function () {
    $(function () {
        $("#tabs").tabs({
            option: "selected",
            heightStyle: "content",
            collapsible: true,
            active: 'none',
            fx: {
                height: 'toggle',
                duration: 500
            },
            select: function (e, ui) {
                $(ui.tab).html("#close-" + event.target.id);
            }
        });
    });
});

非常感谢所有的帮助。我有一种感觉,我应该比现在更多地使用类,这可能只是我的问题之一。我尝试了很多不同的方法来交换标签,但这是我觉得我最接近我的目标的一次。再次感谢您的帮助。

.no-display { display: none; }