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

尝试使用 CSS 而不是 JavaScript。

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