如何在页面加载时隐藏多个div

Question

各位大家好，我目前正在尝试构建自己的网站模板，但我遇到了其中一个网页的问题。

我实现的当前代码涵盖了我需要的90％的功能。我遇到的问题是在页面加载时隐藏其余内容。我只希望显示第一个内容，然后通过使用按钮将其余内容替换为当前内容。

如果有人知道如何实现这样的功能，我会非常感激。如果我的问题措辞严厉或含糊不清，也提前抱歉。

$('#showdiv1').click(function() {
  $('div[id^=div]').hide();
  $('#div1').show();
});
$('#showdiv2').click(function() {
  $('div[id^=div]').hide();
  $('#div2').show();
});

$('#showdiv3').click(function() {
  $('div[id^=div]').hide();
  $('#div3').show();
});

$('#showdiv4').click(function() {
  $('div[id^=div]').hide();
  $('#div4').show();
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<div class="buttons">
  <a class="button" id="showdiv1">Div 1</a>
  <a class="button" id="showdiv2">Div 2</a>
  <a class="button" id="showdiv3">Div 3</a>
  <a class="button" id="showdiv4">Div 4</a>
</div>

<div id="div1">
  <h3 class="partial-border">Title 1</h3>
  <div class="container">
    <div class="row">
      <div class="col-lg-5">
        <div class="row">
          <h6>Lorem</h6>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio omnis sint eos maxime, quisquam incidunt laboriosam quo recusandae corporis minus nam labore a praesentium pariatur fugit quos adipisci? Dicta, porro!</p>
        </div>
        <blockquote class="blockquote text-center company-quotes">
          <p>
            <i>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quod! Neque
                        dolor
                        vel impedit voluptatum, quasi cum ad accusamus, nobis suscipit officiis veniam
                        necessitatibus unde, explicabo rerum. Fugit, atque voluptatibus!
                    </i>
          </p>
        </blockquote>
        <footer class="blockquote-footer text-right">Someone famous in <cite title="Source Title">Source
                    Title</cite></footer>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
      <div class="col-lg-7 border embed-responsive embed-responsive-16by9 border">
        <iframe width="320" height="240" src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>
<div id="div2">
  <h3 class="partial-border">Title 2</h3>
  <div class="container">
    <div class="row">
      <div class="col-lg-5">
        <div class="row">
          <h6>Lorem</h6>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio omnis sint eos maxime, quisquam incidunt laboriosam quo recusandae corporis minus nam labore a praesentium pariatur fugit quos adipisci? Dicta, porro!</p>
        </div>
        <blockquote class="blockquote text-center company-quotes">
          <p>
            <i>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quod! Neque
                        dolor
                        vel impedit voluptatum, quasi cum ad accusamus, nobis suscipit officiis veniam
                        necessitatibus unde, explicabo rerum. Fugit, atque voluptatibus!
                    </i>
          </p>
        </blockquote>
        <footer class="blockquote-footer text-right">Someone famous in <cite title="Source Title">Source
                    Title</cite></footer>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
      <div class="col-lg-7 border embed-responsive embed-responsive-16by9 border">
        <iframe width="320" height="240" src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>
<div id="div3">
  <h3 class="partial-border">Title 3</h3>
  <div class="container">
    <div class="row">
      <div class="col-lg-5">
        <div class="row">
          <h6>Lorem</h6>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio omnis sint eos maxime, quisquam incidunt laboriosam quo recusandae corporis minus nam labore a praesentium pariatur fugit quos adipisci? Dicta, porro!</p>
        </div>
        <blockquote class="blockquote text-center company-quotes">
          <p>
            <i>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quod! Neque
                        dolor
                        vel impedit voluptatum, quasi cum ad accusamus, nobis suscipit officiis veniam
                        necessitatibus unde, explicabo rerum. Fugit, atque voluptatibus!
                    </i>
          </p>
        </blockquote>
        <footer class="blockquote-footer text-right">Someone famous in <cite title="Source Title">Source
                    Title</cite></footer>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
      <div class="col-lg-7 border embed-responsive embed-responsive-16by9 border">
        <iframe width="320" height="240" src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

<div id="div4">
  <h3 class="partial-border">Title 4</h3>
  <div class="container">
    <div class="row">
      <div class="col-lg-5">
        <div class="row">
          <h6>Lorem</h6>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio omnis sint eos maxime, quisquam incidunt laboriosam quo recusandae corporis minus nam labore a praesentium pariatur fugit quos adipisci? Dicta, porro!</p>
        </div>
        <blockquote class="blockquote text-center company-quotes">
          <p>
            <i>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quod! Neque
                        dolor
                        vel impedit voluptatum, quasi cum ad accusamus, nobis suscipit officiis veniam
                        necessitatibus unde, explicabo rerum. Fugit, atque voluptatibus!
                    </i>
          </p>
        </blockquote>
        <footer class="blockquote-footer text-right">Someone famous in <cite title="Source Title">Source
                    Title</cite></footer>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
      <div class="col-lg-7 border embed-responsive embed-responsive-16by9 border">
        <iframe width="320" height="240" src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

Answer 1

更新：我能够弄清楚如何在页面加载时隐藏所有其他div。原来它是一个简单的额外style="display: none;"到所有div标签，除了第一个。

我确信这可能不是最好的做法，因为不建议使用内联CSS。但这是我目前唯一的解决方案，我将继续寻找更好的实施方案。

$(function() {
  $('#showdiv1').click(function() {
    $('div[id^=div]').hide();
    $('#div1').show();
  });
  $('#showdiv2').click(function() {
    $('div[id^=div]').hide();
    $('#div2').show();
  });

  $('#showdiv3').click(function() {
    $('div[id^=div]').hide();
    $('#div3').show();
  });

  $('#showdiv4').click(function() {
    $('div[id^=div]').hide();
    $('#div4').show();
  });

})

.button {
  background-color: red;
  border: solid 2px
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<div class="container mt-4 mb-4">

  <!-- Client List -->
  <div class="buttons">
    <div class="col-md-12 col-sm-12 mt-3">
      <ul class="company-icon buttons">
        <li>
          <a class="button" id="showdiv1">Div 1</a>
        </li>
        <li>
          <a class="button" id="showdiv2">Div 2</a>
        </li>
        <li>
          <a class="button" id="showdiv3">Div 3</a>
        </li>
        <li>
          <a class="button" id="showdiv4">Div 4</a>
        </li>
      </ul>
    </div>
  </div>

  <div id="div1">
    <h3 class="partial-border">Title 1</h3>
    <div class="container">
      <div class="row">
        <div class="col-lg-5">
          <div class="row">
            <h6>Lorem</h6>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio omnis sint eos maxime, quisquam incidunt laboriosam quo recusandae corporis minus nam labore a praesentium pariatur fugit quos adipisci? Dicta, porro!</p>
          </div>
          <blockquote class="blockquote text-center company-quotes">
            <p>
              <i>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quod! Neque
                                    dolor
                                    vel impedit voluptatum, quasi cum ad accusamus, nobis suscipit officiis veniam
                                    necessitatibus unde, explicabo rerum. Fugit, atque voluptatibus!
                                </i>
            </p>
          </blockquote>
          <footer class="blockquote-footer text-right">Someone famous in <cite title="Source Title">Source
                                Title</cite></footer>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="col-lg-7 border embed-responsive embed-responsive-16by9 border">
          <iframe width="640" height="480" src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>

  <div id="div2" style="display: none;">
    <h3 class="partial-border">Title 2</h3>
    <div class="container">
      <div class="row">
        <div class="col-lg-5">
          <div class="row">
            <h6>Lorem</h6>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio omnis sint eos maxime, quisquam incidunt laboriosam quo recusandae corporis minus nam labore a praesentium pariatur fugit quos adipisci? Dicta, porro!</p>
          </div>
          <blockquote class="blockquote text-center company-quotes">
            <p>
              <i>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quod! Neque
                                    dolor
                                    vel impedit voluptatum, quasi cum ad accusamus, nobis suscipit officiis veniam
                                    necessitatibus unde, explicabo rerum. Fugit, atque voluptatibus!
                                </i>
            </p>
          </blockquote>
          <footer class="blockquote-footer text-right">Someone famous in <cite title="Source Title">Source
                                Title</cite></footer>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="col-lg-7 border embed-responsive embed-responsive-16by9 border">
          <iframe width="640" height="480" src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
  <div id="div3" style="display: none;">
    <h3 class="partial-border">Title 3</h3>
    <div class="container">
      <div class="row">
        <div class="col-lg-5">
          <div class="row">
            <h6>Lorem</h6>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio omnis sint eos maxime, quisquam incidunt laboriosam quo recusandae corporis minus nam labore a praesentium pariatur fugit quos adipisci? Dicta, porro!</p>
          </div>
          <blockquote class="blockquote text-center company-quotes">
            <p>
              <i>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quod! Neque
                                    dolor
                                    vel impedit voluptatum, quasi cum ad accusamus, nobis suscipit officiis veniam
                                    necessitatibus unde, explicabo rerum. Fugit, atque voluptatibus!
                                </i>
            </p>
          </blockquote>
          <footer class="blockquote-footer text-right">Someone famous in <cite title="Source Title">Source
                                Title</cite></footer>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="col-lg-7 border embed-responsive embed-responsive-16by9 border">
          <iframe width="640" height="480" src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>

  <div id="div4" style="display: none;">
    <h3 class="partial-border">Title 4</h3>
    <div class="container">
      <div class="row">
        <div class="col-lg-5">
          <div class="row">
            <h6>Lorem</h6>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio omnis sint eos maxime, quisquam incidunt laboriosam quo recusandae corporis minus nam labore a praesentium pariatur fugit quos adipisci? Dicta, porro!</p>
          </div>
          <blockquote class="blockquote text-center company-quotes">
            <p>
              <i>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quod! Neque
                                    dolor
                                    vel impedit voluptatum, quasi cum ad accusamus, nobis suscipit officiis veniam
                                    necessitatibus unde, explicabo rerum. Fugit, atque voluptatibus!
                                </i>
            </p>
          </blockquote>
          <footer class="blockquote-footer text-right">Someone famous in <cite title="Source Title">Source
                                Title</cite></footer>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="col-lg-7 border embed-responsive embed-responsive-16by9 border">
          <iframe width="640" height="480" src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>

  <div id="div5" style="display: none;">
    <h3 class="partial-border">Title 5</h3>
    <div class="container">
      <div class="row">
        <div class="col-lg-5">
          <div class="row">
            <h6>Lorem</h6>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio omnis sint eos maxime, quisquam incidunt laboriosam quo recusandae corporis minus nam labore a praesentium pariatur fugit quos adipisci? Dicta, porro!</p>
          </div>
          <blockquote class="blockquote text-center company-quotes">
            <p>
              <i>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quod! Neque
                                    dolor
                                    vel impedit voluptatum, quasi cum ad accusamus, nobis suscipit officiis veniam
                                    necessitatibus unde, explicabo rerum. Fugit, atque voluptatibus!
                                </i>
            </p>
          </blockquote>
          <footer class="blockquote-footer text-right">Someone famous in <cite title="Source Title">Source
                                Title</cite></footer>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="col-lg-7 border embed-responsive embed-responsive-16by9 border">
          <iframe width="640" height="480" src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>

  <div id="div6" style="display: none;">
    <h3 class="partial-border">Title 6</h3>
    <div class="container">
      <div class="row">
        <div class="col-lg-5">
          <div class="row">
            <h6>Lorem</h6>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio omnis sint eos maxime, quisquam incidunt laboriosam quo recusandae corporis minus nam labore a praesentium pariatur fugit quos adipisci? Dicta, porro!</p>
          </div>
          <blockquote class="blockquote text-center company-quotes">
            <p>
              <i>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quod! Neque
                                    dolor
                                    vel impedit voluptatum, quasi cum ad accusamus, nobis suscipit officiis veniam
                                    necessitatibus unde, explicabo rerum. Fugit, atque voluptatibus!
                                </i>
            </p>
          </blockquote>
          <footer class="blockquote-footer text-right">Someone famous in <cite title="Source Title">Source
                                Title</cite></footer>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="col-lg-7 border embed-responsive embed-responsive-16by9 border">
          <iframe width="640" height="480" src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>

  <div id="div7" style="display: none;">
    <h3 class="partial-border">Title 7</h3>
    <div class="container">
      <div class="row">
        <div class="col-lg-5">
          <div class="row">
            <h6>Lorem</h6>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio omnis sint eos maxime, quisquam incidunt laboriosam quo recusandae corporis minus nam labore a praesentium pariatur fugit quos adipisci? Dicta, porro!</p>
          </div>
          <blockquote class="blockquote text-center company-quotes">
            <p>
              <i>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quod! Neque
                                    dolor
                                    vel impedit voluptatum, quasi cum ad accusamus, nobis suscipit officiis veniam
                                    necessitatibus unde, explicabo rerum. Fugit, atque voluptatibus!
                                </i>
            </p>
          </blockquote>
          <footer class="blockquote-footer text-right">Someone famous in <cite title="Source Title">Source
                                Title</cite></footer>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="col-lg-7 border embed-responsive embed-responsive-16by9 border">
          <iframe width="640" height="480" src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>