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 を記述します。

以下に例を示します。ライブソース

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

「アクティブな」クラスを追加および削除するだけで、状況がどのように変化するかに注意してください。

上記では、スタイルをオーバーライドしていませんが、次のことができます。ライブソース

.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 に答える