0

まず、これについて尋ねるのはちょっと恥ずかしいです。すでに多くの人がこの質問をしていますが、非常に多くの投稿を行った後でも、私が望むものを達成することはできません. 基本的に、最初は非表示の div をボタンのクリック時に表示する必要があります。

display:noneを使用して div を非表示にし、 、 、および を使用して表示しようとしhide()ました。上記のあらゆる種類の組み合わせを使用しても、結果を得ることができませんでした。show()toggle()css("display","block")

コード：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" />
<script src="jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jQuery/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#one').hide();
        $('#Button1').click(function () {
            $('#one').toggle(500);
        });         
    });
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="one" style="height: 20px;width:200px; background-color: Red; ">       
</div>
<asp:Button ID="Button1" runat="server" Text="Show" />
</form>
</body>
</html>

ボタンをクリックすると、div が一瞬表示されてから再び消えます。

上記のコードのshow()代わりに使用すると、同じことが起こります。toggle()

orを使用するstyle="display:none"代わりに divに設定した場合も同じです。hide()show()toggle()

私も使用してみ$('#one').css("display","block");ましたが、やはり同じ結果です。

どこが間違っているのか誰か教えてください。jQuery の学習を始めたばかりで、明らかに単純なことがうまくいかないときは本当にイライラします。

前もって感謝します。:)

4

2 に答える 2

2

を使用してブラウザでレンダリングされるタイプbutton のボタンを使用しているため、次のように使用しますasp:Buttontype="submit"return false;

$(document).ready(function () {
        $('#one').hide();
        $('#Button1').click(function () {
            $('#one').toggle(500);
            return false;
        });         
    });
于 2012-12-07T11:12:47.653 に答える
1

フォームを送信し、ページがリロードされます。ボタン要素のデフォルトのタイプはsubmitです。イベント オブジェクトのメソッドを使用preventDefaultするか、ボタンの type 属性を に設定できますbutton。

$(document).ready(function () {
    $('#one').hide();
    $('#Button1').click(function(e) {
        e.preventDefault();
        $('#one').toggle(500);
    });         
});
于 2012-12-07T11:06:47.843 に答える