web-dev-qa-db-ja.com

特定のdiv onloadを非表示にし、クリック後にdivを表示します

2つのdivがありますdiv1およびdiv2。 div2を自動的に非表示にしたいのですが、preview divをクリックしてから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>
htmlclickjquery
12
swapnesh

セレクターを確認してください。 _#_の_div2_を忘れているようです。さらに、.toggle()を使用して、多くの要素の可視性を一度に切り替えることができます。

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

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

26
Sampson

これは簡単な方法です。お役に立てれば...

<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
  • click関数ではなくtoggleを使用します。


リンク：

JQueryチュートリアル

JQueryリファレンス

7
Dom

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

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

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

});

jQuery IDセレクターの詳細

3
Sarfraz

最初に、ロード時にid = "abc"のdiv要素を非表示にし、次にid = "btn"のボタンを使用して非表示と表示を切り替える場合、

$(document).ready(function() {
 $("#abc").hide(); 
  $("#btn").click(function() {
     $("#abc").toggle();
  });
});
0
KT Chanu
$(document).ready(function() {
    $('#div2').hide(0);
    $('#preview').on('click', function() {
        $('#div1').hide(300, function() { // first hide div1
            // then show div2
            $('#div2').show(300);
        });     
    });
});

あなたが逃しました # 前 div2

作業サンプル

0
thecodeparadox

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

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

0
Madara Uchiha