如何隐藏 <div> 在asp.net中使用jquery标记？

Question

我试图使用jquery隐藏div标签，但我不知道为什么它不隐藏。 我使用的是Microsoft .NET Framework版本：4.0.30319; ASP.NET版本：4.6.1069.1。 当页面加载时，带有id'Panel2'的div标签显示隐藏，每当我点击按钮时，应显示id为'Panel2'的div标签。 但它不是那样发生的......当页面加载时它隐藏了div标签但是当我点击按钮时它只显示div标签2秒后隐藏（即返回其隐藏状态）。 我听说jquery与.aspx无法正常工作。我不知道为什么如果那么那么解决方案是什么？

问题是行号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 /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>

Answer 1

这导致点击页面重新加载，你在重新加载时隐藏你的div，解决方案：首先你需要删除重新加载隐藏你的div：

        //$("#Panel2").hide();

问题2您的button1是提交并提交重新加载页面，因此您需要添加此代码以避免重新加载：

$(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"); 
  }
                    });



            });

并且在开始页面上隐藏你的div在后面的代码中写下这个：

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Panel2.Style.Add("display", "none");
            }
        }

谢谢。

如何隐藏 <div> 在asp.net中使用jquery标记？

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-04-17 06:57:57

如何隐藏 <div> 在asp.net中使用jquery标记？

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-04-17 06:57:57

解决方案1
2 已采纳 2016-04-17 06:57:57