类发生变化时的Jquery问题

我正在我的一个页面上创建一个小框，它将根据活动选项卡在3个不同的输出之间切换。我将最左边的选项卡设置为在加载时处于活动状态，当单击其他选项卡时，此活动选项卡变为普通选项卡，单击的选项卡变为活动选项卡。我创建了两个类，一个名为

activeBoxTab

和

boxTab

，可以在这两个类之间切换，如下面的JSFIDLE所示。我的问题是，无论哪个选项卡设置为默认的活动选项卡，一旦单击另一个选项卡，它都将变得无用，而其他两个选项卡可以来回单击

HTML:

---

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

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

固定小提琴：

---

但是，这并不意味着当您重新单击当前活动的选项卡时，单击处理程序将启动。如果您希望避免在单击处理程序中进行检查和中止，或者使用“.on”进行实时事件检查，以便根据当前类为包含div中的所有元素动态设置单击处理程序。

您只能将事件处理程序绑定到具有class

boxTab

的元素。但是在HTML中，“selected”元素只有类

activeBoxTab

。事件处理程序从未绑定到该元素，因此单击它时不会发生任何事情

只需给它一个

boxTab

类：

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

---

您的第一个

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

选项卡1

选项卡2

表3


$（文档）.ready（函数（）{
$（“.boxTab”）。单击（函数（）{
$（'.activeBoxTab'）。每个（函数（索引、值）{
$（value.removeClass（'activeBoxTab'）；
});
$（this.addClass（'activeBoxTab'）；
返回false；
});
});

---

我看不到指向您的JSFIDLE的链接…一些代码来查看您尝试了什么？呜呜！我忘了包括链接。。现在添加！您的小提琴不起作用，因为您没有包括jQuery。这是一个“正在运行”的演示：。我很确定我有？您不必使用

。每个
。您只需执行
$（'.activeBoxTab'）.removeClass（'activeBoxTab'）。虽然很简单，但他最初的类处理确实有效。在我看来，您应该只从容器中的同级选项卡中删除类，而不是在整个页面中全局删除。如果执行
。每个
都可以执行更具体的操作，例如
如果（索引%2==0）{…}
。例如，更改背景颜色或任何您想要的内容（更改文本等）。我认为这是一个更好的工作功能。回答你，Rup，你可以更具体。这只是一个例子。当然你可以做更多的事情，但这里不需要。不要把事情弄得太复杂，我们可以同意不同意。我发现
$（'.activeBoxTab'）.removeClass（'activeBoxTab'）比
$（'.activeBoxTab'）更容易理解。由于jQuery将在内部调用
。每个
，因此无需显式调用它。但对每个人来说，他们都有自己的风格。我会把这个标记为正确的，因为这和我现在所做的差不多。为此欢呼，作为jQuery/JavaScript的新手，我不知道我需要在加载时绑定事件处理程序，这解释了为什么我找不到解决方法。是的，事件处理程序只能绑定到存在的元素
$（“.boxTab”）
将查找类为
boxTab
的所有元素，然后单击
。单击
将事件处理程序绑定到所有找到的元素。稍后将类添加到元素并不会神奇地添加事件处理程序。由于事件在浏览器中的工作方式，您可以使用事件委派来处理在绑定处理程序时可能还不存在的元素上的事件。但在这种情况下，处理程序并不是直接绑定到元素，而是绑定到元素的祖先。看一看：。啊，我明白，我肯定觉得在使用选项卡的情况下，添加使选项卡与应用于所有选项卡的常规样式类一起突出的类要容易得多。让你更容易知道我在做什么。当然。没有理由不从一开始就包含
boxTab
类，因为它毕竟是一个选项卡（另外，它是选中的）。快乐编码！
<p class="activeBoxTab boxTab" id="returnTab">Tab 2</p>

$(this).siblings('.activeBoxTab').removeClass('activeBoxTab');
$(this).addClass('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;
    });
});