Question

我有两个div，div1和div2。在单击任何这些div时，我想从中删除类.active并将该类添加到另一个div。

我正在尝试关注代码，但我无法弄清楚如何将该类添加到未单击的其他div。感谢。

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

.div1 {
  background: green;
  display: none;
}
.div2 {
  background: red;
  display: none;
}
.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div div1 active">div1</div>
<div class="div div2">div2</div>

小提琴http://jsfiddle.net/vLLtLwxy/

Answer 1

由于只有两个元素，您可以使用.toggleClass()。

Updated Example

$('.div').click(function(){
    $(".div").toggleClass("active");                     
});

同样，值得指出的是，您也可以使用.not()否定其中一个元素：

Example Here

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

Answer 2

只需在toggleClass＆{39}上使用div，如下所示：

$(function () {    
     $('.div').click(function(){
        $(".div").toggleClass("active");
    });
});

请参阅下面的代码：

＆＃13;

$(function () {    
     $('.div').click(function(){
        $(".div").toggleClass("active");
    });
});

＆＃13;

.div1{
    background: green;
    display: none;
}

.div2{
    background: red;
    display: none; 
}

.active{
    display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="div div1 active">I'm div1</div>
<div class="div div2">I'm div2</div>

＆＃13;

希望这有帮助!!!

Answer 3

这是突出显示单击的下一个（相邻）元素的另一种方法：

$('div').click(function() {
    $('div:active').removeClass('active');
    var next = $(this).next();
    if (0 == next.length) {
        next = $('div:first');
    }
    $(next).addClass('active');
});

在7个div之间循环：http://jsfiddle.net/k0oq4hd5/1/

在3个div之间循环：http://jsfiddle.net/k0oq4hd5/2/

Answer 4

使用.addClass方法(MDN Docs):

<div id="div1" class="div active">div1</div>
<div id="div2"class="div">div2</div>

 $('.div').click(function(){
    $("#div1").removeClass("active");
    $("#div2").addClass("active");                    
});

使用ID选择器而不是类选择器可确保您添加更多<div>元素，如果您使用.toggleClass

，则不会切换它们

单击，使用jQuery将类添加到替代div

4 个答案: