Как скрыть один DIV и показать один DIV в JQuery

Question

У меня есть код ниже:

<div class="P1"> 
Testing OK 
<input type="button" value="OK1" id="bp1"> 
</div> 

<div class="P2"> 
Testing OK 
<input type="button" value="OK2" id="bp2"> 
</div> 

И JQuery код ниже:

$("#bp1").click(function(){ 
     $(".P1").hide(); 
     $(".P2").show(); 
    }); 

Но когда он не работает.

Почему? И как исправить?

Спасибо вам большое.

UPDATE Это работает, когда я удаляю $(".P1").hide();ИЛИ$(".P2").show(); из моего кода

Answer 1

$("#bp1").click(function(){ 
     $(".P1").css("display","none"); 
     $(".P2").css("display","block"); 
    }); 

можно скрыть и показать таким образом

Answer 2

Этот код должен работать, попробуйте в том числе это в вашем html page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

После включения этого кода ваш код будет работать.

Answer 3

Вы должны иметь обработчики кликов для каждой из кнопок

$("#bp1").click(function(){ 
 
     $(".P1").hide(); 
 
     $(".P2").show(); 
 
    }); 
 

 
$("#bp2").click(function(){ 
 
     $(".P2").hide(); 
 
     $(".P1").show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="P1"> 
 
Testing OK P1 
 
<input type="button" value="OK1" id="bp1"> 
 
</div> 
 

 
<div class="P2"> 
 
Testing OK P2 
 
<input type="button" value="OK2" id="bp2"> 
 
</div>

Answer 4

Вы можете попробовать следующее:

$("#bp1").click(function(){ 
    $(".P1").removeClassName('hidden'); 
    $(".P2").addClassName('hidden'); 
}); 

Свойство hidden должен быть добавлен в CSS ,

hidden { 
visibility: hidden; 
}