Question

到目前为止我写的代码运行顺利，但是当我在母版页上使用它时，它没有显示预期的行为。面板不会隐藏在母版页上。

我做错了什么？如何在我的母版页上使隐藏和显示面板工作？

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'>
    </script>
     <script type="text/javascript">
         $(function () {
             $("#btn1").click(function (evt) {
                 evt.preventDefault();
                 $('#panel1').slideUp('slow');
                 $('#panel2').slideDown('slow');
             });

             $("#Button1").click(function (evt) {
                 evt.preventDefault();
                 $('#panel2').slideUp('slow');
                 $('#panel1').slideDown('slow');
             });
         });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Panel runat="server" ID="panel1" Style="visibility: visible;">
            <h2>
                This is panel 1</h2>
          
             <input type="button" id="btn1" value="Change Password" />
        </asp:Panel>
        <asp:Panel ID="panel2" runat="server" Style="display: none;">
            <h2>
                This is panel 2.</h2>
          
            <input type="button" id="Button1" value="Cancel" />
        </asp:Panel>
    </div>
    </form>
</body>
</html>

Answer 1

你在找这样的东西吗？

我所做的是将面板放在一个单独的div中。

＆＃13;

$("#btn1").click(function(evt) {
    evt.preventDefault();

    $('#panel2').slideDown('slow');
    $('#panel1').slideUp('slow');
});

$("#Button1").click(function(evt) {
    evt.preventDefault();
    $('#panel2').slideUp('slow');
    $('#panel1').slideDown('slow');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <asp:Panel runat="server" ID="panel1" Style="visibility: visible;">
        <h2>
                    This is panel 1</h2>

        <input type="button" id="btn1" value="Change Password" />
    </asp:Panel>

</div>
<div>
    <asp:Panel ID="panel2" runat="server" Style="display: none;">
        <h2>
                    This is panel 2.</h2>

        <input type="button" id="Button1" value="Cancel" />
    </asp:Panel>
</div>

＆＃13;

如何隐藏＆amp;使用javascript或jQuery显示按钮单击面板？

1 个答案: