如何隐藏&使用javascript或jQuery显示按钮单击面板 [英] How to hide & show Panels on button click using javascript or jQuery
本文介绍了如何隐藏&使用javascript或jQuery显示按钮单击面板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码运行完美。但是当我使用母版页时它无法正常工作。所以帮助我。我如何在母版页中使用此代码。意味着我有.aspx页面，我正在使用母版页，此时此代码未运行。
<％@ 页 语言 = C＃ AutoEventWireup = true CodeFile = Default2。 aspx.cs 继承 = 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 = 服务器 >
< title > < / title >
< script < span class =code-attribute> type =' text / javascript' src =' http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' >
< / 脚本 >
< 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 >
< 表单 id = < span class =code-keyword> form1 runat = server >
< div >
< asp：Panel runat = server ID = panel1 样式 = 可见性：可见; >
< h2 >
这是小组1 < / h2 > ;
< input type = 按钮 id = btn1 value = 更改密码 / >
< / asp：Panel >
< asp：Panel ID = p anel2 runat = server 样式 = display：none; >
< h2 >
这是面板2. < / h2 > ;
< input type = 按钮 i d = Button1 value = 取消 / >
< / asp：Panel >
< / div >
< / form >
< / body >
< / html > ;
解决方案
（ function （）{
（ ＃btn1）。click（ function （evt）{
evt.preventDefault（）;
（' ＃panel1'）。slideUp（' slow'）;
I have following code is running perfect. but when i use master page its not working. So help me. How i use this code in master page. Means i have .aspx page for which i am using master page that time this code is not running.
<%@ 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> 解决方案
(function () {
("#btn1").click(function (evt) { evt.preventDefault();
('#panel1').slideUp('slow');
这篇关于如何隐藏&使用javascript或jQuery显示按钮单击面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
