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;首先它不会那样工作。

Answer 1

更改第一个显示：block

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

或使用id：

选择

#newboxes1{
    display:block;
}

Answer 2

在您的代码中添加此CSS：

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

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

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

Answer 3

  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();

默认显示第一个div

3 个答案: