jQuery 在加载时隐藏特定的 div，然后在单击后显示 div

Hide particular div onload and then show div after click

提问by swapnesh

I have two divs div1and div2. I want div2 to be automatically hidden but when i click on previewdiv then div2to be made visible and div1to hide. This is the code i tried but no luck :(

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

回答by Sampson

Make sure to watch your selectors. You appear to have forgotten the #for div2. Additionally, you can toggle the visibility of many elements at once with .toggle():

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

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

Demo: http://jsfiddle.net/dJg8N/

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

回答by Dom

This is an easier way to do it. Hope this helps...

这是一种更简单的方法。希望这可以帮助...

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

• If you want the div to be hidden on load, make the style display:none
• Use togglerather than clickfunction.

• 如果您希望在加载时隐藏 div，请将样式设置为display:none
• 使用切换而不是点击功能。

Links:

链接：

JQuery Tutorials

jQuery 教程

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

• http://www.w3schools.com/jquery/default.asp(W3Schools)

• http://thenewboston.org/list.php?cat=32(Video Tutorials)

• http://andreehansson.se/the-basics-of-jquery/(Basic Tutorial)

• 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

JQuery 参考

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

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

回答by Sarfraz

You are missing #hash character before id selectors, this should work:

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

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

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

});

---

---

Learn More about jQuery ID Selectors

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

回答by Madara's Ghost

The second time you're referring to div2, you're not using the # id selector.

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

There's no element named div2.

没有名为 div2 的元素。

回答by thecodeparadox

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

You missed #before div2

你#之前错过了div2

Working Sample

工作样本

回答by KT Chanu

At first if you want to hide div element with id = "abc" on load and then toggle between hide and show using a button with id = "btn" then,

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

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