代码之家 › 专栏 › 技术社区 › Pelligea

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

jquery-ui-tabs dom jquery

Pelligea · 技术社区 · 11 年前

无可否认,我只是在学习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; }

1 回复 | 直到 11 年前

Horatio Alderaan 11 年前

我想你有点错过了 $(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');
}

这应该会达到预期的结果。