Question

我需要点击另一个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>

Answer 1

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

这将隐藏一个元素，类似地

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

将显示它。

在两个函数中使用这两个函数，然后通过按钮上的单击事件调用它们，应该可以为您提供所需的内容。

我没有提供完整的代码解决方案，因为这是微不足道的，您应该能够自己关注文档。

以下是文档的链接，以便您了解它：

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

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

Answer 2

喜欢这个吗？

$('#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>

Answer 3

只需在两个按钮上添加一个ID，然后将事件分配给toggle div。

＆＃13;

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

＆＃13;

在div之间切换

3 个答案: