隐藏特定div onload然后单击后显示div

Question

我有两个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>

Answer 1

确保观看您的选择器。您似乎忘记了#的{​​{1}}。此外，您可以使用div2：

一次切换多个元素的可见性

.toggle()

演示：http://jsfiddle.net/dJg8N/

Answer 2

这是一种更简单的方法。希望这会有所帮助...

<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教程

• http://docs.jquery.com/Main_Page

• http://www.w3schools.com/jquery/default.asp（W3Schools）

• http://thenewboston.org/list.php?cat=32（视频教程）

• http://andreehansson.se/the-basics-of-jquery/（基础教程）

JQuery References

• http://api.jquery.com/
• http://oscarotero.com/jquery/

Answer 3

在id选择器之前，你缺少#哈希字符，这应该有效：

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

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

});

---

Learn More about jQuery ID Selectors

Answer 4

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

您在#

之前错过了div2

<强> Working Sample

Answer 5

第二次引用div2时，你没有使用#id选择器。

没有名为div2的元素。

Answer 6

首先，如果你想在加载时隐藏id =“abc”的div元素，然后使用id =“btn”的按钮在hide和show之间切换，那么，

$(document).ready(function() {
 $("#abc").hide(); 
  $("#btn").click(function() {
     $("#abc").toggle();
  });
});