如何在页面加载时隐藏多个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。事实证明，除第一个标记外，它是所有div标签的简单附加$(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(); }); })。

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

.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>

<style type="text/css" media="screen">
    @media only screen and (max-width: 480px) and (min-width: 0px) {
        table[class="desktop"] {
            display: none;
        }

        table[class="mobile"] {
            display: block;
        }
    }

    @media only screen and (max-width: 4000px) and (min-width: 481px) {
        table[class="desktop"] {
            display: block;
        }

        table[class="mobile"] {
            display: none;
        }
    }
</style>
<table border="1" cellpadding="10" cellspacing="0" width="100%" class="desktop">
    <tr>
        <td align="center" colspan="4">Standard Option
        </td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td colspan="4" align="right" style="text-align: center;">NON-POSTAL PREMIUM
        </td>
    </tr>
    <tr>
        <td></td>
        <td>Code</td>
        <td>Biweekly</td>
        <td>Monthly (Retirees)</td>
    </tr>
    <tr>
        <td>Self Only</td>
        <td>341</td>
        <td>$57.84</td>
        <td>$125.31</td>
    </tr>
    <tr>
        <td>Self Plus One</td>
        <td>343</td>
        <td>$124.35</td>
        <td>$269.42</td>
    </tr>
</table>
<table border="1" cellpadding="" cellspacing="0" width="480" class="mobile">
    <tr>
        <td align="center" valign="top">
            <table align="left" border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td>Standard Option (NON-POSTAL PREMIUM)</td>
                </tr>
            </table>
            <br style="clear: both;" />
            <table align="left" border="1" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td><b>Self Only</b></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Code</td>
                    <td>341</td>
                </tr>
                <tr>
                    <td>Biweekly</td>
                    <td>$57.84</td>
                </tr>
                <tr>
                    <td>Monthly (Retirees)</td>
                    <td>$125.31</td>
                </tr>
            </table>
            <br style="clear: both;" />
            <table align="left" border="1" cellpadding="10" cellspacing="0" width="100%">

                <tr>
                    <td><b>Self Plus One</b></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Code</td>
                    <td>343</td>
                </tr>
                <tr>
                    <td>Biweekly</td>
                    <td>$124.35</td>
                </tr>
                <tr>
                    <td>Monthly (Retirees)</td>
                    <td>$269.42</td>
                </tr>

            </table>
            <br style="clear: both;" />
            <table align="left" border="1" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td><b>Self and Family</b></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Code</td>
                    <td>343</td>
                </tr>
                <tr>
                    <td>Biweekly</td>
                    <td>$136.78</td>
                </tr>
                <tr>
                    <td>Monthly (Retirees)</td>
                    <td>$296.36</td>
                </tr>
            </table>
        </td>
    </tr>
</table>