1

我正在我的一个页面上创建一个小框，它将根据活动选项卡在 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;
    });
});
4

3 回答 3

2

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

也给它boxTab上课：

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

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

$(this).siblings('.activeBoxTab').removeClass('activeBoxTab');
$(this).addClass('activeBoxTab');
于 2013-05-29T10:38:34.527 回答
0

您只是将单击处理程序绑定到 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 中的所有元素动态设置单击处理程序。

于 2013-05-29T10:38:14.823 回答
0

您的第一个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;
    });
});

工作演示

于 2013-05-29T10:40:41.643 回答