切換div

我需要隱藏這些divs點擊button在另一個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

歡迎堆棧溢出。在這裏，我們希望人們在尋求幫助之前做一些[研究]（https://stackoverflow.com/search?q=toggle+divs）。另外，我建議你閱讀[如何提出一個好問題]（https://stackoverflow.com/help/how-to-ask） – Tijmen

請你考慮接受答案嗎？ – DimitrisCSD

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

這將隱藏的元素，同樣

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

將證明這一點。

在一對函數中使用這兩個函數，然後從按鈕上的點擊事件調用它們，應該會給你你想要的。

我沒有提供完整的代碼解決方案，因爲這很簡單，您應該能夠自己關注文檔。

這裏是一個鏈接到文檔，以便你可以閱讀一下：

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

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

來源

2017-09-07 14:01:10 DimitrisCSD

只需添加一個id這兩個按鈕和一個事件指派給他們toggle的div的。

<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

回答

相關問題