Моя веб-страница выглядит следующим образом:
<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.