Первоначально скрытие div для последующего отображения

Моя веб-страница выглядит следующим образом:

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

<div id="id2" class="stuff" style="display:none">
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff" style="display:none">
TEXT, FORMS, and STUFF
</div>

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

В этом случае у меня есть события jQuery click, которые устанавливают отображение наследуемого элемента для наследования, а остальные - none.

$("#btn2").click(function (e) {
    $("#id1").css('display','none');
    $("#id3").css('display','none');
    $("#id2").css('display','inherit');
});

Отображение и скрытие работает правильно, однако я замечаю, что некоторые вещи в изначально скрытых divs не отображаются правильно, особенно элементы, которым манипулирует CSS. По сути, когда страница загружает скрытые div, вы не правильно получаете рендеринг, и когда они отображаются, все выглядит некрасиво. Как правильно это сделать?

ИЗМЕНИТЬ::::::::::::::::

То, что я закончил, это установить все изначально скрытые divs на "visibility: none", а затем на странице onLoad() событие установки отображения: none. Когда я переключаю, меняю видимость и отображение. Все отображается правильно, и, поскольку все вещи статически установлены на невидимые, нет уродливых 2 секунд, где отображаются все div.

Ответы

Ответ 1

Попробуйте вместо этого использовать visibility. Пример:

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

Оба display и visibility могут влиять на поведение браузера.

Альтернативный подход к обоим - установить opacity для разделов, которые вы хотите скрыть до 0. Это всегда работает в моем опыте, но менее элегантно.

Обновить в ответ на комментарий: В этом случае вы можете установить другие свойства, такие как width и height на 0px и over-flow на hidden, чтобы divs не занимают места на экране. Уродливый, но базовый и работает.

<style>
.hidden {
    visibility: hidden;
    over-flow: 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>

Вы можете использовать методы jQuery addClass и removeClass, чтобы сделать div видимыми и невидимыми, например: $("#id1").removeClass("hidden"); и $("#id3").addClass("hidden");.

Ответ 2

Почему бы не использовать jQuery show и hide?

Скрыть элементы, которые вы хотите скрыть (duh) при загрузке страницы с помощью CSS:

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

Или вы можете скрыть его с помощью Javacript:

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

Показать или скрыть их, используя:

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

Ответ 3

Лучше всего не добавлять логику отображения в вашу метку, лучший способ сделать это будет

.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');

});

Надеюсь, что это поможет, если у вас все еще возникают проблемы с воспроизведением, а затем попробуйте maby

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

Ответ 4

Мне нравится делать это вот так:
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>

Ответ 5

Может быть .toggle может помочь вам достичь этого?

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

Ответ 6

window.onload = pre_loader;

function pre_loader() {

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

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

}