隐藏特定的div onload，然后在点击后显示div [英] Hide particular div onload and then show div after click

问题描述

我有两个div div1 和 div2 。我想让div2自动隐藏，但是当我点击预览 div，然后 div2 变为可见并且 div1 来隐藏。这是我尝试的代码，但没有运气：（$ / b
$ b

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

<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 。此外，您可以使用 .toggle（）同时切换多个元素的可见性：

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():

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

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

这篇关于隐藏特定的div onload，然后在点击后显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！