1

代码：

var $anchors = $(".box_one, .box_two");

$(document).on('click', function (e) {
    var $elem = $(e.target);
    if ($elem.hasClass('box_one') || $elem.hasClass('box_one_active')) {
        $elem.toggleClass('box_one box_one_active');
        $anchors.not($elem).addClass('box_two').removeClass('box_two_active');
    }
    else if($elem.hasClass('box_two') || $elem.hasClass('box_two_active')) {
        $elem.toggleClass('box_two box_two_active');
        $anchors.not($elem).addClass('box_one').removeClass('box_one_active');
    }
    else {
        $('.box_one_active').addClass('box_one').removeClass('box_one_active');
        $('.box_two_active').addClass('box_two').removeClass('box_two_active');
    }
});

在上面的代码中，当 box_one 被点击时，box_one_active 占据了 box_one 的位置，当 box_two 被点击时，box_two_active 占据了 box_two 的位置。

如何更改代码，以便何时box_one_active处于活动状态，box_two_active同时也处于不活动状态。意思是，用户必须单击一个来禁用另一个并启用一个。

我怎么做？

4

2 回答 2

1

我建议不要这样做。相反，只需切换一个活动类，然后编写 CSS 来对类组合进行操作。

这是一个示例：Live Copy | 直播源

CSS：

.box_one {
  /* Styles for `box_one` when not active */
  background: blue;
  color: white;
  font-weight: bold;
}
.box_one.active {
  /* Adds/overrides further classes for when `box_one` is also `active` */
  border: 2px solid red;
}
.box_two {
  /* Styles for `box_two` when not active */
  background: green;
  color: white;
  font-weight: bold;
}
.box_two.active {
  /* Adds/overrides further classes for when `box_two` is also `active` */
  border: 2px solid yellow;
}

HTML：

<div class="box_one">This is box_one</div>
<div class="box_two">This is box_two</div>

JavaScript：

$("div").click(function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
});

请注意添加和删除“活动”类如何改变事情。

在上面我没有覆盖样式，但你可以：Live Copy | 直播源

.box_one {
  /* Styles for `box_one` when not active */
  background: blue;
  color: white;
  font-weight: bold;
}
.box_one.active {
  /* Adds/overrides further classes for when `box_one` is also `active` */
  background: red;
}
.box_two {
  /* Styles for `box_two` when not active */
  background: green;
  color: white;
  font-weight: bold;
}
.box_two.active {
  /* Adds/overrides further classes for when `box_two` is also `active` */
  background: yellow;
}
于 2013-05-23T22:16:11.830 回答
0

您可以只使用活动选择器来删除活动类的所有痕迹。

就您而言，您的活动课程正在发生变化，这使事情变得复杂。

您可以只制作活动课程.box_active，这将大大简化事情。

然后删除它，做

$('.box_active').removeClass('box_active');
于 2013-05-23T21:56:41.217 回答