div間の切り替え

buttonのクリック時にこれらのdivを別のdivで非表示にする必要があります。別のdivのbuttonをクリックすると、もう一方のdivとその逆を隠します。div間の切り替え

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title> 
     tesing hide 
    </title> 
    <style> 
     #ticket, #usernamepassword { margin-top: 20px; width: 960px; color: navy; background-color: pink; border: 2px solid blue; padding: 5px; text-align: center; } 
    </style> 

</head> 

    <center> 
     <div id="ticket"> 
      <div> this is the content of my ticket div 
      </div> 
      <button>Show usernamepassword</button> 

     </div> 

     <div id="usernamepassword"> 
      <div> this is the content of username and password div</div> 
      <button>Show ticket</button> 
     </div> 
    </center> 
</html>

出典

2017-09-07 Francis Mubiru

ようこそ。ここでは、ヘルプを依頼する前に人々が[research]（https://stackoverflow.com/search?q=toggle+divs）をやってくれることを期待しています。また、[良い質問をするには]を読むように助言したいと思っています（https://stackoverflow.com/help/how-to-ask） – Tijmen

回答を受け入れることを検討してください。 – DimitrisCSD

$(".target").hide();

これは、要素を非表示になり、同様に

$(".target").show();

それが表示されます。

これらの2つを2つの関数で使用し、ボタンのクリックイベントから呼び出すと、探しているものが表示されます。

私は完全なコードソリューションを提供していません。これは簡単なことであり、あなた自身がドキュメントに従うことができるはずです。あなたはそれについて読むことができるので、ここで

は、ドキュメントへのリンクです：

http://api.jquery.com/show/

http://api.jquery.com/hide/

出典

2017-09-07 14:01:10 DimitrisCSD

ジャストボタンの両方にIDを追加し、toggleにそれらにイベントを割り当てますdivs。このよう

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title> 
 
     tesing hide 
 
    </title> 
 
    <style> 
 
     #ticket, #usernamepassword { margin-top: 20px; width: 960px; color: navy; background-color: pink; border: 2px solid blue; padding: 5px; text-align: center; } 
 
    </style> 
 

 
</head> 
 
    <center> 
 
     <div id="ticket"> 
 
      <div> this is the content of my ticket div 
 
      </div> 
 
      <button id="showUsr">Show usernamepassword</button> 
 

 
     </div> 
 

 
     <div id="usernamepassword"> 
 
      <div> this is the content of username and password div</div> 
 
      <button id="showTicket">Show ticket</button> 
 
     </div> 
 
    </center> 
 
</html> 
 
    
 
<script> 
 
    $('#showUsr').on('click',function(){ 
 
     $('#usernamepassword').toggle(); 
 
    }); 
 

 
    $('#showTicket').on('click',function(){ 
 
     $('#ticket').toggle(); 
 
    }); 
 
</script>

は

出典

2017-09-07 14:01:32 DenseCrab

？スタックオーバーフローへ

$('#usernamepassword').hide(); 
 

 
$('#ticket button').on('click', function(){ 
 
    $('#usernamepassword').toggle(); 
 
    $('#ticket').toggle(); 
 
}); 
 

 
$('#usernamepassword button').on('click', function(){ 
 
    $('#ticket').toggle(); 
 
    $('#usernamepassword').toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title> 
 
     tesing hide 
 
    </title> 
 
    <style> 
 
     #ticket, #usernamepassword { margin-top: 20px; width: 960px; color: navy; background-color: pink; border: 2px solid blue; padding: 5px; text-align: center; } 
 
    </style> 
 

 
</head> 
 
    <center> 
 
     <div id="ticket"> 
 
      <div> this is the content of my ticket div 
 
      </div> 
 
      <button>Show usernamepassword</button> 
 

 
     </div> 
 

 
     <div id="usernamepassword"> 
 
      <div> this is the content of username and password div</div> 
 
      <button>Show ticket</button> 
 
     </div> 
 
    </center> 
 
</html>

出典

2017-09-07 14:05:07

答えて

関連する問題