Question

我是初学者，我遇到了问题。请你帮助我好吗？我把div放在了彼此之上。我用段落制作了两个其他div（＆＃34;按钮＆＃34;），并使用jQuery show / hide效果来切换两个div。这部分工作得很好。不过我想在此效果中添加一个效果（添加类/删除类）来显示女巫一个是活跃的。但它没有改变＆＃34;按钮＆＃34;的前景。你可以帮我解决我的错误吗？

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

所以show / hide是wirking但添加/删除类不是n＆n; n。你可以帮我解决我的错误吗？

Answer 1

删除＆＃39;。＆＃39; （点）来自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

以下是更新后的代码：

<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 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

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

您可以尝试使用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/

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

jQuery麻烦：添加嵌套在show / hide里面的class / remove类

5 个答案: