1

诚然，我只是在学习 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; }
4

1 回答 1

1

我认为你稍微错过了$(ui.tab).html("#close-" + event.target.id);代码在做什么。那就是告诉 jQuery，“让 ui.tab 的内容成为字符串"#close-" + event.target.id

为了使生活尽可能简单，我建议将您的“关闭”跨度移动到选项卡链接内，如下所示：

<div id="tabs">
    <ul>
        <li><a href="#tab1" id="tab1-label-link">
            <span id="tab1-label">Label 1</span>
            <span id="close-tab1-label" class="no-display">Tab Close</span></a>
        </li>
        <li><a href="#tab2" id="tab2-label-link">
            <span id="tab2-label">Label 2</span>
            <span id="close-tab2-label" class="no-display">Tab Close</span></a>
        </li>
        <li><a href="#tab3" id="tab3-label-link">
            <span id="tab3-label">Label 3</span>
            <span id="close-tab3-label" class="no-display">Tab Close</span></a>
        </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>
</div>

然后，将你的函数换成select一个beforeActivate函数，如下所示：

beforeActivate: function(e, ui) {
    var tab = $(ui.newTab),
        oldTab = $(ui.oldTab);
    tab.find('span').toggleClass('no-display');
    oldTab.find('span').toggleClass('no-display');
}

那应该达到预期的结果。

于 2013-04-10T01:15:56.590 回答