jQuery麻煩：添加類/刪除嵌套在show / hide內部的類

Question

我是新手，有問題。 請你幫助我好嗎？ 我將div彼此疊加。 我用段落創建了另外兩個div（“按鈕”），並使用jQuery show / hide效果切換了兩個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

這是更新的代碼：

<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 ，只需提供類名. 不需要。

 $(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 5

1. 如前所述，使用jQuery類方法時不需要使用點。

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