13

2 つの divdiv1とdiv2. div2 を自動的に非表示にしたいのですが、previewdiv をクリックするdiv2とdiv1、表示されて非表示になります。これは私が試したコードですが、うまくいきません:(

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div2").hide();
  $("#preview").click(function() {
    $("#div1").hide();
    $("#div2").show();
  });
});
</script>

<div id="div1">
This is preview Div1. This is preview Div1.
</div>

<div id="div2">
This is preview Div2 to show after div 1 hides.
</div>

<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>
4

6 に答える 6

28

セレクターに注意してください。forを忘れたよう#ですdiv2。さらに、多くの要素の可視性を一度に切り替えることができます.toggle():

// Short-form of `document.ready`
$(function(){
    $("#div2").hide();
    $("#preview").on("click", function(){
        $("#div1, #div2").toggle();
    });
});

デモ: http://jsfiddle.net/dJg8N/

于 2012-05-30T05:34:51.763 に答える
7

これはそれを行うためのより簡単な方法です。お役に立てれば...

<script type="text/javascript">
$(document).ready(function () {
    $("#preview").toggle(function() {
        $("#div1").hide();
        $("#div2").show();
    }, function() {
        $("#div1").show();
        $("#div2").hide();
    });
});

<div id="div1">
This is preview Div1. This is preview Div1.
</div>

<div id="div2" style="display:none;">
This is preview Div2 to show after div 1 hides.
</div>

<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>
  • ロード時にdivを非表示にする場合は、スタイルをdisplay：noneにします。
  • クリック機能ではなくトグルを使用します。


リンク：

JQueryチュートリアル

JQueryリファレンス

于 2012-07-31T18:26:03.497 に答える
3

#IDセレクターの前にハッシュ文字がありません。これは機能するはずです:

$(document).ready(function() {
    $("#div2").hide();

    $("#preview").click(function() {
      $("#div1").hide();
      $("#div2").show();
    });

});

jQuery ID セレクターの詳細

于 2012-05-30T05:30:04.713 に答える
0 
$(document).ready(function() {
    $('#div2').hide(0);
    $('#preview').on('click', function() {
        $('#div1').hide(300, function() { // first hide div1
            // then show div2
            $('#div2').show(300);
        });     
    });
});

#前に見逃したdiv2

作業サンプル

于 2012-05-30T05:29:28.567 に答える
0

2 回目に div2 を参照するときは、# id セレクターを使用していません。

div2 という名前の要素はありません。

于 2012-05-30T05:30:29.830 に答える