Как скрыть несколько делений при загрузке страницы - PullRequest
Новая
       10

Как скрыть несколько делений при загрузке страницы

0 голосов
/ 17 сентября 2018

Привет всем. В настоящее время я пытаюсь создать собственный шаблон веб-сайта, и у меня возникла проблема с одной из моих страниц.

Текущий код, который я реализовал, покрыл 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>

1 Ответ

0 голосов
/ 17 сентября 2018

Обновление: мне удалось выяснить, как скрыть все остальные элементы 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>
...