如何使用javascript或jQuery隐藏和显示面板上的单击按钮？

Question

The code I wrote so far runs smoothly, but when I use it on the master page it doesn't show the expected behavior. 到目前为止，我编写的代码运行流畅，但是当我在母版页上使用它时，它没有显示预期的行为。 The panel does not hide back on the master page. 该面板不会在主页上隐藏。

What am I doing wrong ? 我究竟做错了什么？ How can I make the hide&show panel work on my master page ? 如何使隐藏和显示面板在母版页上工作？

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

Are you looking for something like this? 您是否正在寻找这样的东西？

What I have done is, placed the panels in a separate div. 我要做的是将面板放在单独的div中。

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

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

如何使用javascript或jQuery隐藏和显示面板上的单击按钮？

问题描述

1 个解决方案

解决方案1
0 2015-06-17 18:54:39

如何使用javascript或jQuery隐藏和显示面板上的单击按钮？

问题描述

1 个解决方案

解决方案1 0 2015-06-17 18:54:39

解决方案1
0 2015-06-17 18:54:39