如何使用jquery和C＃隐藏和显示面板？
问题描述：
当页面加载时，面板应该被隐藏，点击一个按钮后它应该显示面板但不会发生这种情况......
问题是当页面加载时，面板是隐藏但当我点击按钮时它没有显示面板，即当我点击按钮时没有任何反应。我无法弄明白为什么。
看看我的代码。请告诉我我在哪里犯错，解决方案是什么。
我尝试过：
.aspx： -
When page load the panel should be hidden and after a click on a button it should display the panel but it is not happening like that...
Problem is when the page load ,panel is hidden but when I click on the button it doesn't show the panel i.e. nothing happens when I click on the button. I can't figure out why.
Have a look at my code. Please show me where I am making mistake and what is the solution.
What I have tried:
.aspx :-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Student_Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>
<script type="text/javascript">
var currentTab = 0;
$(function () {
$("#tabs").tabs({
select: function (e, i) {
currentTab = i.index;
}
});
});
$("#btnNext").live("click", function () {
var tabs = $('#tabs').tabs();
var c = $('#tabs').tabs("length");
currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
tabs.tabs('select', currentTab);
$("#btnPrevious").show();
if (currentTab == (c - 1)) {
$("#btnNext").hide();
} else {
$("#btnNext").show();
}
});
$("#btnPrevious").live("click", function () {
var tabs = $('#tabs').tabs();
var c = $('#tabs').tabs("length");
currentTab = currentTab == 0 ? currentTab : (currentTab - 1);
tabs.tabs('select', currentTab);
if (currentTab == 0) {
$("#btnNext").show();
$("#btnPrevious").hide();
}
if (currentTab < (c - 1)) {
$("#btnNext").show();
}
});
$(function () {
//$("#Panel2").hide();
document.getElementById('form1').onsubmit = function () {
return false;
}//Avoid Reloading
$("#Button1").click(function () {
if ($('#anspanel').is(":hidden")) {
$('#anspanel').show();
}
else {
$('#anspanel').hide();
}
if ($("#Button1").val() == "Show Answer") {
$("#Button1").val("Hide Answer");
} else {
$("#Button1").val("Show Answer");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
<li><a href="#tabs-4">Tab 4</a></li>
<li><a href="#tabs-5">Tab 5</a></li>
</ul>
<div id="tabs-1">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
<br />
<br />
<br />
<span>A-</span> <asp:Label ID="Label2" runat="server" Text='<%#Eval("Option1")%>'></asp:Label>
<br />
<br />
<span>B-</span> <asp:Label ID="Label3" runat="server" Text='<%#Eval("Option2")%>'></asp:Label>
<br />
<br />
<span>C-</span> <asp:Label ID="Label4" runat="server" Text='<%#Eval("Option3")%>'></asp:Label>
<br />
<br />
<span>D-</span> <asp:Label ID="Label5" runat="server" Text='<%#Eval("Option4")%>'></asp:Label>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Show Answer" />
<br />
<asp:Panel id="anspanel" runat="server">
<span>Correct Answer is :-</span><asp:Label ID="Label6" runat="server" Text='<%#Eval("CorrectAns")%>'></asp:Label>
<br />
<br />
<asp:Label ID="Label7" runat="server" Text='<%#Eval("Explanation")%>'></asp:Label>
</asp:Panel>
</asp:Panel>
<br />
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="tabs-2">
Tab 2 Content
</div>
<div id="tabs-3">
Tab 3 Content
</div>
<div id="tabs-4">
Tab 4 Content
</div>
<div id="tabs-5">
Tab 5 Content
</div>
</div>
<input type="button" id="btnPrevious" value="Previous" style = "display:none"/>
<input type="button" id="btnNext" value="Next" />
</div>
</form>
</body>
</html>
.aspx.cs :-
.aspx.cs :-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
public partial class Student_Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.DataSource = GetData("SELECT top 2 Question, Option1, Option2, Option3, Option4, CorrectAns, Explanation FROM Questions");
GridView1.DataBind();
foreach (GridViewRow row in GridView1.Rows)
{
if (row.RowType == DataControlRowType.DataRow)
{
Panel panel1 = (Panel)row.FindControl("Panel1");
Panel anspanel = (Panel)panel1.FindControl("anspanel");
anspanel.Style.Add("display", "none");
}
}
}
}
private DataSet GetData(string query)
{
string conString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlCommand cmd = new SqlCommand(query);
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds;
}
}
}
}
}
答
(function () {
(\"#tabs\").tabs({
select: function (e, i) {
currentTab = i.index;
}
});
});
("#tabs").tabs({ select: function (e, i) { currentTab = i.index; } }); });
(\"#btnNext\").live(\"click\", function () {
var tabs =
("#btnNext").live("click", function () { var tabs =