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

回答

相关问题