Question

我试图使用jquery隐藏div标签，但我不知道为什么它不隐藏。我使用的是Microsoft .NET Framework版本：4.0.30319; ASP.NET版本：4.6.1069.1。当页面加载时，带有id'Panel2'的div标签显示hide和每当我点击按钮时，应显示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");
            }
        }

<强>感谢。

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

1 个答案: