Initially hiding a div for later display

Question

My web page is like the following:

TEXT, FORMS, and STUFF




        
                      

              相关标签:
       
      

Answer 1

Try using visibility instead. Example:

$("#id2").click(function (e) {
    $("#id1").css('visibility','hidden');
    $("#id3").css('visibility','hidden');
    $("#id2").css('visibility','visible');
});

Both display and visibility can have an effect on browser behavior.

An alternative work-around to both is to set the opacity of the divs you want to hide to 0. That always works in my experience but is less elegant.

---

Update in reply to comment: In that case, you can set other properties like the width and height to 0px and the over-flow to hidden so that the divs don't occupy any space on screen. Ugly, but basic, and works.

<style>
.hidden {
    visibility: hidden;
    overflow: hidden;
    width: 0px;
    height: 0px;
}
</style>

<div class="hidden"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Aster_Tataricus.JPG/245px-Aster_Tataricus.JPG"/></div>
<div class="hidden"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Chamomile%40original_size.jpg/280px-Chamomile%40original_size.jpg"/></div>
<div><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Jonquil_flowers06.jpg/320px-Jonquil_flowers06.jpg"/></div>

You can use the jQuery addClass and removeClass methods to make the divs visible and invisible, e.g.: $("#id1").removeClass("hidden"); and $("#id3").addClass("hidden");.

Answer 2

window.onload = pre_loader;

function pre_loader() {

    javascript:document.getElementById('loader').style.visibility='hidden';

    javascript:document.getElementById('loader').style.opacity=0;

}

Answer 3

Why not use jQuery show and hide?

Hide the elements you want to hide (duh) on page load with CSS:

#id1, #id2, .. {
    display: none;
} 

Or you can hide it with Javacript:

$('#id1, #id2, ..').hide();

Show or hide them by using:

$('#btn2').click(function() {
    $('#id1, #id3').hide();
    $('#id2').show();
});

Answer 4

Its best not to add display logic into your mark up a better way to do this would be

.hidden{ display:none;}

.

<div id="id1" class="stuff">
TEXT, FORMS, and STUFF
</div>

<div id="id2" class="stuff hidden" >
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff hidden">
TEXT, FORMS, and STUFF
</div>

.

$(".stuff").click(function () {
    $(".stuff").addClass('hidden');
    $(this).removeClass('hidden');

});

Hope that helps if your still having rendering issues then maby try

.hidden{ visibility:hidden; }
.stuff{display:block;}

Answer 5

I like to do it like this:
javascript:

$('#btn2').click(function(){
    $('#id1').addClass('hidden');
    $('#id3').addClass('hidden');
    $('#id2').removeClass('hidden');
});

css:

.hidden {
    display: none;
}

html:

<div id="id1" class="stuff">
TEXT, FORMS, and STUFF
</div>

<div id="id2" class="stuff hidden">
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff hidden">
TEXT, FORMS, and STUFF
</div>

<a id="btn1">DD</a>
<a id="btn2">DD</a>
<a id="btn3">DD</a>

Answer 6

Maybe .toggle can help you achieve this?

$("#btn2").click(function (e) { 
    $("#id1").toggle(); 
    $("#id2").toggle();
    $("#id3").toggle();
});