Question

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

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

那应该达到预期的效果。

在活动和重置时，如何让jQuery选项卡标签交换？

1 个答案: