j查询麻烦:添加类/删除嵌套在显示/隐藏中的类

Question

我是初学者，我有一个问题。 你能帮帮我吗？ 我做了一个彼此重叠的div。 我用段落制作了另外两个div("按钮"(，并使用 jQuery 显示/隐藏效果来切换两个div。 这部分工作得很好。 尽管如此，我想在此效果中添加一个其他效果(添加类/删除类(以显示女巫一号处于活动状态。 但这并没有改变"按钮"的外观。 你能帮助我犯错的地方吗？

这是我的代码：

$(document).ready(function(){
$( "#click2" ).click(function(){
$( "#two" ).show();
$("#click2").removeClass(".passive").addClass(".active");
});
$( "#click1" ).click(function(){
$( "#two" ).hide();
$("#click1").removeClass(".passive").addClass(".active");
});
});

.active, .passive{
cursor: pointer;
font-weight: bold;
}
.active{
border-bottom: 2px solid blue;
color: blue;
}
.passive{
border-bottom: 2px solid gray;
color: gray;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="row">
<div id="click1" class="col-xs-6 active">
<p  class="text-center text-uppercase">referencies a</p>
</div>
<div id="click2" class="col-xs-6 passive">
<p class="text-center text-uppercase">referencies b</p>
</div>
</div>

所以显示/隐藏是旋转的，但添加/删除类不是。 你能帮助我犯错的地方吗？

Answer 1

删除"."(点( 来自 CSS 类名。jQuery addClass 和 removeClass 只采用 css 类的名称。

addClass("className") -- correct
addClass(".className") -- wrong

在您的情况下，它会像：

$("#click2").removeClass("passive").addClass("active");

Answer 2

你必须从类中删除点， 并添加对另一个按钮的更改调用，如以下代码

$(document).ready(function() {
$("#click2").click(function() {
$("#two").show();
$("#click2").removeClass("passive").addClass("active");
$("#click1").removeClass("active").addClass("passive");
});
$("#click1").click(function() {
$("#two").hide();
$("#click1").removeClass("passive").addClass("active");
$("#click2").removeClass("active").addClass("passive");
});
});

.active,
.passive {
cursor: pointer;
font-weight: bold;
}
.active {
border-bottom: 2px solid blue;
color: blue;
}
.passive {
border-bottom: 2px solid gray;
color: gray;
}
`

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div id="click1" class="col-xs-6 passive">
<p class="text-center text-uppercase">referencies a</p>
</div>
<div id="click2" class="col-xs-6 active">
<p class="text-center text-uppercase">referencies b</p>
</div>
</div>
<div class="row">
<div id="two" class="col-xs-12 active">
<p class="text-center text-uppercase">Div content </p>
</div>
</div>

Answer 3

使用removeClass和addClass时，你只需要提供类名，.是不需要的。

$(document).ready(function() {
$("#click2").click(function() {
$("#two").show();
$(this).removeClass("passive").addClass("active");
$("#click1").removeClass("active").addClass("passive");
});
$("#click1").click(function() {
$("#two").hide();
$(this).removeClass("passive").addClass("active");
$("#click2").removeClass("active").addClass("passive");
});
});

.active,
.passive {
cursor: pointer;
font-weight: bold;
}
.active {
border-bottom: 2px solid blue;
color: blue;
}
.passive {
border-bottom: 2px solid gray;
color: gray;
}
`

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div id="click1" class="col-xs-6 active">
<p class="text-center text-uppercase">referencies a</p>
</div>
<div id="click2" class="col-xs-6 passive">
<p class="text-center text-uppercase">referencies b</p>
</div>
</div>
<div class="row">
<div id="two" class="col-xs-12 active">
<p class="text-center text-uppercase">Div content </p>
</div>
</div>

Answer 4

以下是更新的代码：

<script type="text/javascript">
$(document).ready(function(){
$( "#click2" ).click(function(){
$( "#two" ).show();
$("#click2").removeClass("passive").addClass("active"); // Removed `.` from class names
});
$( "#click1" ).click(function(){
$( "#two" ).hide();
$("#click1").removeClass("passive").addClass("active");  // Removed `.` from class names
});
});
</script>

Answer 5

1. 如前所述，使用 jQuery 类方法时不需要使用 dot;

2. 你可以尝试通过使用toggleClass而不是addClass和removeClass来简化它：

   $( "#click3" ).click(function(){
   $("#click3, #click4").toggleClass("active passive");
   });
   $( "#click4" ).click(function(){
   $("#click3, #click4").toggleClass("active passive");
   });
   

您可以提及行为的差异(现在主动元素在单击时变为被动元素(。

为了进一步简化，我们可以只添加一个侦听器，但检查我们到底点击了什么：

$(document).on('click', '.passive', function() {
$('#click1, #click2').toggleClass("active passive");
});

https://jsfiddle.net/aakochar/u3c34b48/

3. 作为替代方案(或者如果您想调查代码(，请查看引导选项卡： http://getbootstrap.com/javascript/#tabs