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

Question

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

一定要看你的选择器.你似乎已经忘记了#的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,请将样式显示为: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/