javascript - 默认显示第一个 div

Question

 .newboxes {
        display: none;

    }

  <script language="javascript">
    function showonlyone(thechosenone) {
         $('.newboxes').each(function(index) {
              if ($(this).attr("id") == thechosenone) {
                   $(this).show(200);
              }
              else {
                   $(this).hide(600);
              }
         });
    }
  </script>

<a href="javascript:showonlyone('newboxes1');" id="myHeader1">
<a href="javascript:showonlyone('newboxes2');" id="myHeader2">
<a href="javascript:showonlyone('newboxes3');" id="myHeader3">
<a href="javascript:showonlyone('newboxes4');" id="myHeader4">

<div class="newboxes" id="newboxes1" style="display: none;padding: 0px; width: 750px; font-size:14px;">
<div class="newboxes" id="newboxes2" style="display: none;padding: 0px; width: 750px; font-size:14px;">
<div class="newboxes" id="newboxes3" style="display: none;padding: 0px; width: 750px; font-size:14px;">
<div class="newboxes" id="newboxes4" style="display: none;padding: 0px; width: 750px; font-size:14px;">

我想在第一次加载页面时首先显示。我应该如何处理这段代码？如果我添加 display: block; 第一个 div 它不是那样工作的。

Answer 1

在您的代码中添加此 CSS：

.newboxes:first-child {
    display: block;
}

并从所有 div 中删除内联显示属性。

<div class="newboxes" id="newboxes1" style="padding: 0px; width: 750px; font-size:14px;">

Answer 2

  function showonlyone(thechosenone) {
         $('.newboxes').each(function(index) {
              if ($(this).attr("id") == thechosenone) {
                   $(this).show(200);
              }
              else {
                   $(this).hide(600);
              }
         });
    } 

// This will show first box :eq(n) returns the nth item from the selector (starting from 0)
$('.newboxes:eq(0)').show();

Answer 3

将第一个更改为 display:block

<div class="newboxes" id="newboxes1" style="display: block;padding: 0px; width: 750px; font-size:14px;">

或使用 id 选择：

#newboxes1{
    display:block;
}