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>

或者你可以像这样做javascript代码..

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

Answer 4

尝试使用CSS而不是JavaScript。

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

使用onload函数加载div

4 个答案: