隐藏特定的 div onload，然后单击后显示 div答案

【问题标题】：Hide particular div onload and then show div after click隐藏特定的 div onload，然后单击后显示 div
【发布时间】：2012-05-30 05:27:52
【问题描述】：

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

【问题讨论】：

$("#div2").show(); //$("#div2").hide();
api.jquery.com/id-selector

标签： html click jquery

【解决方案1】：

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

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

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

【讨论】：

非常感谢您提供的选择器通知 .. 真的，对于那个切换，我真的需要自己解决 :( 将在 5 分钟内批准您的评论
@swapnesh 这只是时间问题。不久之后，这对你来说都是第二天性；）继续访问 StackOverflow，你会发现自己每天都在学习新东西。

【解决方案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
使用 toggle 而不是 click 功能。

链接：

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

【讨论】：

感谢他的信息:) 我真的很想接触 jquery ...你有任何链接可以帮助我改进我的 jquery :)
@swapnesh 我编辑了我的初始帖子并添加了链接。就个人而言，我觉得学习 jquery 的最佳方式是亲眼目睹它的实际应用。我使用jsfiddle.net 进行测试，使用http://api.jquery.com/ 和http://oscarotero.com/jquery/ 引用事件/方法/等。我在 jsfiddle 上为您制作了一个示例页面（随意将其用作模板）：http://jsfiddle.net/83UdX/3/。编码愉快！

【解决方案3】：

您在 id 选择器之前缺少 # 哈希字符，这应该可以工作：

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

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

});

Learn More about jQuery ID Selectors

【讨论】：

【解决方案4】：

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

没有名为 div2 的元素。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：