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中，“selected”元素只有类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/

但是，这意味着当您重新单击当前活动的选项卡时，将触发单击处理程序。如果您想避免这种情况，您可以在点击处理程序中检查并中止，或使用＆＃39; .on＆＃39;进行实时事件检查。根据包含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

更改类的Jquery问题

3 个答案: