web-dev-qa-db-ja.com

後で表示するために最初にdivを非表示にする

私のWebページは次のようなものです。

<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クリックイベントがあります。

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

表示と非表示は正しく機能しますが、最初に非表示になったdivの一部、特にCSSによって操作される要素が正しくレンダリングされないことに気付きました。基本的に、ページが読み込まれたときに非表示のdivが正しくレンダリングされず、表示されると見苦しくなります。これを適切に行う方法は何ですか？

編集::::::::::::::::::::::::::::::::::::::::::::::

私がやったことは、最初に隠されていたすべてのdivを「visibility：none」に設定してから、ページのonLoad（）イベントでdisplay：noneを設定することです。トグルすると、表示と表示の両方が変わります。すべてが正しくレンダリングされ、静的に表示されないように設定されているため、すべてのdivが表示される2秒間のい点はありません。

javascriptjquerycsshtmlvisibility
17
user974896

代わりにvisibilityを使用してみてください。例：

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

displayとvisibilityの両方がブラウザの動作に影響を与える可能性があります。

両方に対する代替の回避策は、非表示にするdivのopacityを_0_に設定することです。それは私の経験では常に機能しますが、エレガントではありません。

コメントへの返信で更新：その場合、widthやheightなどの他のプロパティを_0px_および_over-flow_に設定できます。 divが画面上のスペースを占有しないようにhiddenに。 glyいですが、基本的で、動作します。

_<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>
_

JQuery addClassおよびremoveClassメソッドを使用して、divを表示および非表示にすることができます（例：$("#id1").removeClass("hidden");および$("#id3").addClass("hidden");）。

13
Oliver Moran

JQuery showとhideを使用しないのはなぜですか？

CSSを使用してページの読み込み時に非表示にする要素を非表示にします（duh）。

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

または、Javacriptで非表示にすることができます。

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

以下を使用してそれらを表示または非表示にします。

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

表示ロジックをマークアップに追加しないことが最善の方法です。

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

});

あなたがまだレンダリングの問題を抱えているなら、それが助けになることを願っています

.hidden{ visibility:hidden; }
.stuff{display:block;}
3
Dominic Green

私はこのようにするのが好きです：
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>
1
Aust

たぶん.toggleはあなたがこれを達成するのを助けることができますか？

$("#btn2").click(function (e) { 
    $("#id1").toggle(); 
    $("#id2").toggle();
    $("#id3").toggle();
});
1
Dom
window.onload = pre_loader;

function pre_loader() {

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

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

}
0
user5044085