javascript - onload 関数で div をロードする

Question

特定のコンテンツを互いに表示する3つの異なるdivがあります。しかし今、ページが読み込まれたときに最初の div のコンテンツを表示したいと考えています。以下のコードを参照して、私のページが読み込まれると、 LTE のコンテンツが表示されるはずです。

<div id="lte" class="content_main">
    <h1> lte</h1>
</div>

<div id="device_details" class="content_main">
    <h1> device details</h1>
</div>


<div id="self_care" class="content_main">
    <h1>selfcare</h1>
</div>

Answer 1

これを試して：

$(document).ready(function(){
    $("#device_details").hide();
    $("#self_care").hide();
});

jsfiddle

Answer 2

CSS で他の要素を非表示にするだけです。

#device_details, 
#self_care {
  display:none;
}

次に表示するには、display:block; を使用します。またはjQueryを使用：

$('#device_details', '#self_care')show();

Answer 3

これを試してみてください..

<div id="lte" class="content_main">
    <h1> lte</h1>
</div>

<div id="device_details" class="content_main" style="display:none;">
    <h1> device details</h1>
</div>


<div id="self_care" class="content_main" style="display:none;">
    <h1>selfcare</h1>
</div>

または、このようなjavascripコードを実行できます..

$(document).ready(function(){
    $("#device_details").hide();
    $("#self_care").hide();
});

Answer 4

JavaScript ではなく CSS を使用するようにしてください。

.content_main {
  display: none;
}
.content_main:first-child {
  display: block;
}