Question

我不确定如何解释我正在寻找的东西，所以我要把它分步。

两个div有不同的颜色，可以说一个是红色，另一个是蓝色。
当我点击红色div时，我希望红色div的背景颜色变为橙色。
当我点击蓝色div时，我希望红色div重新变为红色并使蓝色div变为橙色。

我有一个代码，我一直试图扭曲它，使它成为我想要它，但我似乎无法弄清楚如何。如果你能帮助我，那将是非常善良的你。感谢您提供给我的所有信息。

代码将用于菜单，如果您还可以将其设置为不仅仅是两个div。

$(document).ready(function(){
    $("div").on({
        mouseenter: function(){
            $(this).css("background-color", "green");
        },  
        mouseleave: function(){
            $(this).css("background-color", "red");
        },
        click: function(){
            $(this).css("background-color", "blue");
        }  
    });
});

div { background-color: pink;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div style="width: 80px; padding: 25px;">Example 1</div>
<div style="width: 80px; padding: 25px;">Example 2</div>

</body>
</html>

Answer 1

听起来你只想在div上active上课。像这样的东西;

＆＃13;

$(document).ready(function() {
  $("div").on({
    click: function() {
      $("div.active").removeClass("active"); //turn off active for the other divs
      $(this).addClass("active");  //make this one active
    }
  });
});

＆＃13;

div {
  border: 1px solid black;
}

div.active {
  background-color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <div style="width: 80px; padding: 25px;">Example 1</div>
  <div style="width: 80px; padding: 25px;">Example 2</div>
  <div style="width: 80px; padding: 25px;">Example 3</div>

</body>

</html>

＆＃13;

在这种情况下，您只需要在html中添加更多divs，我已经添加了第三个。

Answer 2

这就是你要求的，但我想你无法完全解释你想要的东西。我根据你的步骤创建了这个版本，并根据猜测做了另一个版本，这可能就是你要找的那个。

版本1 （根据您的步骤）：

＆＃13;

$(document).ready(function(){
    $("div.red").on('click', function(){
        if(!$(this).hasClass('is-orange')) $(this).addClass('is-orange');
    });

    $("div.blue").on('click', function(){
        if(!$(this).hasClass('is-orange')) $(this).addClass('is-orange');
        if($(this).siblings('.red').hasClass('is-orange')) $(this).siblings('.red').removeClass('is-orange')
    });
});

＆＃13;

.red {background-color: red;}
.blue {background-color: blue;}
.is-orange {background-color: orange;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="red" style="width: 80px; padding: 25px;">Example 1</div>
<div class="blue" style="width: 80px; padding: 25px;">Example 2</div>

＆＃13;

第2版（更完整）：

＆＃13;

$(document).ready(function(){
    $("div.red").on('click', function(){
    	if(!$(this).hasClass('is-orange')) $(this).addClass('is-orange');
    	else $(this).removeClass('is-orange');
    	if($(this).siblings('.blue').hasClass('is-orange')) $(this).siblings('.blue').removeClass('is-orange');
    });
    $("div.blue").on('click', function(){
    	if(!$(this).hasClass('is-orange')) $(this).addClass('is-orange');
    	else $(this).removeClass('is-orange');
    	if($(this).siblings('.red').hasClass('is-orange')) $(this).siblings('.red').removeClass('is-orange');
    });
});

＆＃13;

.red {background-color: red;}
.blue {background-color: blue;}
.is-orange {background-color: orange;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red" style="width: 80px; padding: 25px;">Example 1</div>
<div class="blue" style="width: 80px; padding: 25px;">Example 2</div>

＆＃13;

P.S ：我帮助了＃34;班级＆＃34;为了使这项工作，如果你需要这个代码没有类，只要问，我将编辑这些代码。

Answer 3

在样式表中添加一个类，即

.active{
  background-color: orange;
}

并使用jQuery切换类，如：

$(document).ready(function(){
    $("div").on('click', function(){
            $(this).toggleClass('active');
    });
});

使用jquery

3 个答案: