I am trying to hide a div tag using jquery but I don't no why it is not hiding . I am using Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.6.1069.1. When page load then div tag with id 'Panel2' show hide and Whenever I click on button then div tag with id 'Panel2' should show. But it is not happening like that...when the page load it hide that div tag but when I click on button it show the div tag only for 2 seconds after that it hide(i.e. comes back its hide state). I have heard that jquery doesn't work properly with .aspx .I don't know why If so then what is the solution ?
我正在尝试使用jquery隐藏div标记，但是我不知道为什么它没有隐藏。我正在使用Microsoft .NET Framework版本:4.0.30319;ASP。净版:4.6.1069.1。当页面加载时，id为'Panel2'的div标签会显示隐藏，当我点击按钮时，id为'Panel2'的div标签会显示出来。但事情并不是这样的……当页面加载时它隐藏div标签但是当我点击按钮时它只显示div标签2秒之后它隐藏(例如。返回隐藏状态)。我听说jquery使用。aspx不能正常工作，我不知道为什么会这样，那么解决方案是什么?
Problem is with line number 47 to 54(i.e. the query of hiding the div tag is between these lines) Here is what I have tried :-
问题是第47到54行(即隐藏div标签的查询在这些行之间)这里是我尝试过的:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="demopractice.aspx.cs" Inherits="Student_demopractice" %>
<!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();
$("#Button1").click(function() {
if ($('#Panel2').is(":hidden")) {
$('#Panel2').show();
}
});
});
</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:Panel ID="Panel1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
<br />
<span>A-</span> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<br />
<br />
<span>B-</span> <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
<br />
<br />
<span>C-</span> <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
<br />
<br />
<span>D-</span> <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Show Answer" OnClick="Button1_Click" />
<br />
<div id="Panel2" runat="server">
<span>Correct Answer is :-</span><asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:Label ID="Label7" runat="server" Text="Label"></asp:Label>
</div>
</asp:Panel>
</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>1 个解决方案
#1
2
That's caused page reload on click and you hide you div in reload,, Solution: First you need remove hide your div on reload:
这导致页面重载点击，你将div隐藏在重载中，解决方案:首先你需要删除隐藏div在重载中:
//$("#Panel2").hide();
the problem 2 your button1 is submit and submit reload page so you need to add this code to avoid reload:
问题2您的button1提交并提交了reload页面，所以您需要添加这段代码以避免重新加载:
$(function () {
//$("#Panel2").hide();
document.getElementById('form1').onsubmit = function () {
return false;
}//Avoid Reloading
$("#Button1").click(function() {
if ($('#Panel2').is(":hidden")) {
$('#Panel2').show();
}
if ($("#Button1").val() == "Show Answer")
{
$("#Button1").val("Hide Answer");
} else {
$("#Button1").val("Show Answer");
}
});
});
and for hide your div on start page write this in your code behind:
在开始页隐藏你的div在后面的代码中写上:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Panel2.Style.Add("display", "none");
}
}
Thanks.
谢谢。
#1
2
That's caused page reload on click and you hide you div in reload,, Solution: First you need remove hide your div on reload:
这导致页面重载点击，你将div隐藏在重载中，解决方案:首先你需要删除隐藏div在重载中:
//$("#Panel2").hide();
the problem 2 your button1 is submit and submit reload page so you need to add this code to avoid reload:
问题2您的button1提交并提交了reload页面，所以您需要添加这段代码以避免重新加载:
$(function () {
//$("#Panel2").hide();
document.getElementById('form1').onsubmit = function () {
return false;
}//Avoid Reloading
$("#Button1").click(function() {
if ($('#Panel2').is(":hidden")) {
$('#Panel2').show();
}
if ($("#Button1").val() == "Show Answer")
{
$("#Button1").val("Hide Answer");
} else {
$("#Button1").val("Show Answer");
}
});
});
and for hide your div on start page write this in your code behind:
在开始页隐藏你的div在后面的代码中写上:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Panel2.Style.Add("display", "none");
}
}
Thanks.
谢谢。