更改类的Jquery问题

Question

我正在我的一个页面上创建一个小框，它将根据活动选项卡在 3 个不同的输出之间切换。我将最左侧的选项卡设置为在加载时处于活动状态，当单击其他选项卡时，此活动选项卡变为普通选项卡，单击的选项卡变为活动选项卡。我创建了两个类，一个名为activeBoxTab 和boxTab，正如您在下面的jsfiddle 中看到的那样，它们可以在它们之间切换。我的问题是，无论哪个选项卡设置为默认活动，一旦单击另一个选项卡就变得无用，而其他两个选项卡可以来回单击。

http://jsfiddle.net/rxYB7/2/

HTML：

<div id="boxTabs">
    <p class="boxTab" id="deliveryTab">Tab 1</p>
    <p class="activeBoxTab" id="returnTab">Tab 2</p>
    <p class="boxTab" id="careTab">Tab 3</p>
</div>

JS：

$(document).ready(function () {
    $(".boxTab").click(function () {
        $(this).siblings(".activeBoxTab").attr('class', 'boxTab');
        $(this).attr('class', 'activeBoxTab');
        return false;
    });
});

Answer 1

您只能将事件处理程序绑定到类 boxTab 的元素。但是在您的 HTML 中，“选定”元素只有 activeBoxTab 类。事件处理程序永远不会绑定到该元素，因此当您单击它时不会发生任何事情！

也给它boxTab 类：

<p class="activeBoxTab boxTab" id="returnTab">Tab 2</p>

并将您的事件处理程序更改为：

$(this).siblings('.activeBoxTab').removeClass('activeBoxTab');
$(this).addClass('activeBoxTab');

Answer 2

您只是将点击处理程序绑定到 boxTab 选项卡，而最初的活动选项卡不是 boxTab。您需要将点击处理程序绑定到两者：

$(document).ready(function () {
    $(".boxTab, .activeBoxTab").click(function () {
        $(this).siblings(".activeBoxTab").attr('class', 'boxTab');
        $(this).attr('class', 'activeBoxTab');
        return false;
    });
});

固定小提琴：http://jsfiddle.net/rxYB7/4/

但是，这确实意味着当您重新单击当前活动的选项卡时，单击处理程序将触发。如果你想避免这种情况，你可以在点击处理程序中检查和中止，或者使用使用“.on”的实时事件检查来根据当前类为包含 div 中的所有元素动态设置点击处理程序。

Answer 3

您的第一个 activeBoxTab 没有点击事件。这就是为什么它不起作用。您必须添加两个类 boxTab activeBoxTab 来处理该选项卡中的事件。然后您必须删除或添加activeBoxTab 类。

<div id="boxTabs">
    <p class="boxTab" id="deliveryTab">Tab 1</p>
    <p class="boxTab activeBoxTab" id="returnTab">Tab 2</p>
    <p class="boxTab" id="careTab">Tab 3</p>
</div>
<div id="productInfoBox">
    <p class="activeBoxInfo" id="deliveryInfo"></p>
</div>

$(document).ready(function () {
    $(".boxTab").click(function () {
        $('.activeBoxTab').each(function(index, value) {
            $(value).removeClass('activeBoxTab');
        });
        $(this).addClass('activeBoxTab');

        return false;
    });
});

Working demo