html - 隐藏特定的 div onload，然后单击后显示 div

Question

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

Answer 1

请务必注意您的选择器。您似乎忘记了#for div2。此外，您可以使用以下命令一次切换许多元素的可见性.toggle()：

// Short-form of `document.ready`
$(function(){
    $("#div2").hide();
    $("#preview").on("click", function(){
        $("#div1, #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 参考资料

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

Answer 3

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

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

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

});

---

了解有关 jQuery ID 选择器的更多信息

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

工作样本

Answer 5

您第二次提到 div2 时，您没有使用 #id 选择器。

没有名为 div2 的元素。

Answer 6

首先，如果您想在加载时隐藏 id = "abc" 的 div 元素，然后使用 id = "btn" 的按钮在隐藏和显示之间切换，

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