23

私のウェブページは次のようなものです。

<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（）イベントで表示を設定することです：none。切り替えると、表示と表示の両方が変更されます。すべてが正しくレンダリングされ、静的に非表示に設定されているため、すべてのdivが表示される醜い2秒はありません。

4

6 に答える 6

15

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

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

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

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

コメントへの返信で更新：その場合、divが画面上のスペースを占有しないように、andtoやtoなどの他のプロパティを設定widthできheightます0px。醜いですが、基本的で、機能します。over-flowhidden

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

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

于 2012-07-20T21:29:18.763 に答える
6

jQueryshowを使ってみませんhideか？

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

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

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

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

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

$('#btn2').click(function() {
    $('#id1, #id3').hide();
    $('#id2').show();
});
于 2012-07-20T21:35:15.380 に答える
5

マークアップに表示ロジックを追加しないのが最善です。これを行うためのより良い方法は次のとおりです。

.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;}
于 2012-07-20T21:32:16.720 に答える
1

私はこのようにするのが好きです：
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>
于 2012-07-20T21:35:40.977 に答える
1

たぶん.toggleはこれを達成するのに役立ちますか？

$("#btn2").click(function (e) { 
    $("#id1").toggle(); 
    $("#id2").toggle();
    $("#id3").toggle();
});
于 2012-07-20T21:39:01.633 に答える
0 
window.onload = pre_loader;

function pre_loader() {

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

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

}
于 2015-06-24T10:06:35.953 に答える