html - 新手 - 内容不在容器中

Question

我是网络开发的新手，但希望有人能快速回答。

遇到问题:https://codepen.io/kktotheing/pen/gewXor

我似乎无法让“数据索引”(2-5) 留在它的容器中。如果您单击每个框，您将看到内容中断。

我觉得这很简单，但是想不通!

想法？

  <section id="timeline">
  <div class="content js-content" data-index="1">
    <div class="article">
      <img class="tmln-img left" src="img/after-party.png">
    </div>
    <div class="article middle">
      <h2>Group Activity (optional)</h2>
      <h3>
        If interested in Kayaking or Paddle Boarding on Shem Creek with the dolphins, please call Nature's Adventures (843.668.3222) to reserve your spot. 
      </h3>
    </div>
    <div class="article right">
      <p>Nature’s Adventures<br>
        Friday<br>
        September 14th<br>
        11:00 AM<br><br>
        <a href="https://www.google.com/maps/place/Nature+Adventures/@32.792955,-79.881475,15z/data=!4m2!3m1!1s0x0:0x954b1c0e981eb324?sa=X&ved=0ahUKEwjN7Pjx8O_ZAhXhpVkKHZJ9Az4Q_BIIfzAK" target="_blank">view on map</a>
      </p>
      <p>
      Attire: Southern Chic
      </p>
    </div>
  </div>
<div class="content js-content" data-index="2">
   <div class="article">
      <img class="tmln-img" src="https://www.instagram.com/p/BeoauojHb7b/?taken-at=858831521">
    </div>
    <div class="article">
      <h2>Welcome Party</h2>
      <h3>
        Join us on James Island to ring in the weekend.
      </h3>
    </div>
    <div class="article">
      <p>Ellis Creek Fish Camp<br>
        Friday<br>
        September 14th<br>
        6:30 PM – 9:30 PM<br><br>
        <a href="https://www.google.com/maps/place/Nature+Adventures/@32.792955,-79.881475,15z/data=!4m2!3m1!1s0x0:0x954b1c0e981eb324?sa=X&ved=0ahUKEwjN7Pjx8O_ZAhXhpVkKHZJ9Az4Q_BIIfzAK" target="_blank">view on map</a>
      </p>
      <p>
      Attire: Southern Chic
      </p>
    </div>
</div>
<div class="content js-content" data-index="3">
   <div class="article">
      <img class="tmln-img" src="https://scontent-iad3-1.cdninstagram.com/vp/189b811bf84bab74e69f38c1bb2b70da/5B473587/t51.2885-15/e35/26873054_205238820214875_3941054332882911232_n.jpg">
    </div>
    <div class="article">
      <h2>Welcome Drinks</h2>
      <h3>
        For those arriving later on Friday, please join us after the Welcome Party at our favorite biergarten in downtown Charleston, before heading to King Street.
      </h3>
    </div>
    <div class="article">
      <p>East Bay Biergarten<br>
        Friday<br>
        September 14th<br>
        9:30 AM<br><br>
        <a href="https://www.google.com/maps/place/Nature+Adventures/@32.792955,-79.881475,15z/data=!4m2!3m1!1s0x0:0x954b1c0e981eb324?sa=X&ved=0ahUKEwjN7Pjx8O_ZAhXhpVkKHZJ9Az4Q_BIIfzAK" target="_blank">view on map</a>
      </p>
      <p>
      Attire: Southern Chic
      </p>
    </div>
</div>
<div class="content js-content" data-index="4">
   <div class="article">
      <img class="tmln-img" src="img/after-party.png">
    </div>
    <div class="article">
      <h2>Ceremony &amp; Reception</h2>
      <h3>
        Transportation will be provided.
      </h3>
    </div>
    <div class="article">
      <p>Middleton Place<br>
        Saturday<br>
        September 15th<br>
        5:00 PM<br><br>
        <a href="https://www.google.com/maps/place/Middleton+Place/@32.8997941,-80.1365051,15z/data=!4m2!3m1!1s0x0:0x28820167654634ac?sa=X&ved=0ahUKEwiM-ai26fPZAhUHMd8KHURGCk8Q_BIIhgEwEQ" target="_blank">view on map</a>
      </p>
    </div>
</div>
<div class="content js-content" data-index="5">
   <div class="article">
      <img class="tmln-img" src="img/after-party.png">
    </div>
    <div class="article">
      <h2>After Party (optional)</h2>
      <h3>
        For those who want to keep the party going. 
      </h3>
    </div>
    <div class="article">
      <p>Uptown Social<br>
        Saturday<br>
        September 15th<br>
        11:30 PM<br><br>
        <a href="https://www.google.com/maps/place/Uptown+Social/@32.7926045,-79.9412328,15z/data=!4m2!3m1!1s0x0:0x8f533b56b2761649?sa=X&ved=0ahUKEwiqgt2F6vPZAhXDk1kKHQPaBbgQ_BIIdzAK">view on map</a>
      </p>
    </div>
</div>

<div class="selector">
  <a href="#" class="tmln-button js-button js-active" data-index="1">Group Activity<br>(optional)</a>
  <a href="#" class="tmln-button js-button" data-index="2">Welcome Party</a>
  <a href="#" class="tmln-button js-button" data-index="3">Welcome Drinks</a>
  <a href="#" class="tmln-button js-button" data-index="4">Ceremony &amp;<br> Reception</a>
  <a href="#" class="tmln-button js-button" data-index="5">After Party<br>(optional)</a>
</div>

Answer 1

如果您希望您的内容具有固定高度，除了像您所做的那样设置 height:300px 之外，还可以使用 overflow-y:scroll

要在每个 js-content 上使用 display:flex，在您的 jQ 中而不是 .show 使用 .css('显示','flex') 。 show() 本质上是为元素赋予 display:block 的样式。这就是为什么你需要使用 css()

给它一个特定的显示

$content.hide().filter('[data-index="' + index + '"]').css('display','flex');

var $buttons = $('.js-button');
    var $content = $('.js-content');
    var doContent = function(e) {
      e.preventDefault();
      var $this = $(e.target);
      var index = $this.data('index');
      $content.hide().filter('[data-index="' + index + '"]').css('display','flex');
      $buttons.removeClass('js-active');
      $this.addClass('js-active');
    }; 
    $buttons.on('click', doContent);

#timeline {
  margin: 0 auto;
  width: 70%;
  border: 3px solid black;
}

.content {
  margin: 0 auto;
  display: none;
  height: 300px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  overflow-y:scroll;/* added */
}

.content[data-index="1"] {
  display: flex;
}

.content[data-index="2"],
.content[data-index="3"],
.content[data-index="4"],
.content[data-index="5"] {
  display: none;
}

.article {
  border: 2px dashed blue;
  padding: 20px;
}

/*.left {
  width: 25%;
}*/

.middle {
  width: 60%;
}

.right {
  width: 25%;
}

.tmln-img {
  max-width: 150px;
}

a.tmln-button {
  border: 1px solid green;
  color: #151515;
  padding: 20px;
  text-align: center;
  text-decoration: none;
}

a.tmln-button.js-active {
  text-decoration: none;
  background-color: black;
  color: white;
}

.selector {
  display: flex;
  justify-content: space-between;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="timeline">
      <div class="content js-content" data-index="1">
        <div class="article">
          <img class="tmln-img left" src="img/after-party.png">
        </div>
        <div class="article middle">
          <h2>Group Activity (optional)</h2>
          <h3>
            If interested in Kayaking or Paddle Boarding on Shem Creek with the dolphins, please call Nature's Adventures (843.668.3222) to reserve your spot. 
          </h3>
        </div>
        <div class="article right">
          <p>Nature’s Adventures<br>
            Friday<br>
            September 14th<br>
            11:00 AM<br><br>
            <a href="https://www.google.com/maps/place/Nature+Adventures/@32.792955,-79.881475,15z/data=!4m2!3m1!1s0x0:0x954b1c0e981eb324?sa=X&ved=0ahUKEwjN7Pjx8O_ZAhXhpVkKHZJ9Az4Q_BIIfzAK" target="_blank">view on map</a>
          </p>
          <p>
          Attire: Southern Chic
          </p>
        </div>
      </div>
    <div class="content js-content" data-index="2">
       <div class="article">
          <img class="tmln-img" src="https://www.instagram.com/p/BeoauojHb7b/?taken-at=858831521">
        </div>
        <div class="article">
          <h2>Welcome Party</h2>
          <h3>
            Join us on James Island to ring in the weekend.
          </h3>
        </div>
        <div class="article">
          <p>Ellis Creek Fish Camp<br>
            Friday<br>
            September 14th<br>
            6:30 PM – 9:30 PM<br><br>
            <a href="https://www.google.com/maps/place/Nature+Adventures/@32.792955,-79.881475,15z/data=!4m2!3m1!1s0x0:0x954b1c0e981eb324?sa=X&ved=0ahUKEwjN7Pjx8O_ZAhXhpVkKHZJ9Az4Q_BIIfzAK" target="_blank">view on map</a>
          </p>
          <p>
          Attire: Southern Chic
          </p>
        </div>
    </div>
    <div class="content js-content" data-index="3">
       <div class="article">
          <img class="tmln-img" src="https://scontent-iad3-1.cdninstagram.com/vp/189b811bf84bab74e69f38c1bb2b70da/5B473587/t51.2885-15/e35/26873054_205238820214875_3941054332882911232_n.jpg">
        </div>
        <div class="article">
          <h2>Welcome Drinks</h2>
          <h3>
            For those arriving later on Friday, please join us after the Welcome Party at our favorite biergarten in downtown Charleston, before heading to King Street.
          </h3>
        </div>
        <div class="article">
          <p>East Bay Biergarten<br>
            Friday<br>
            September 14th<br>
            9:30 AM<br><br>
            <a href="https://www.google.com/maps/place/Nature+Adventures/@32.792955,-79.881475,15z/data=!4m2!3m1!1s0x0:0x954b1c0e981eb324?sa=X&ved=0ahUKEwjN7Pjx8O_ZAhXhpVkKHZJ9Az4Q_BIIfzAK" target="_blank">view on map</a>
          </p>
          <p>
          Attire: Southern Chic
          </p>
        </div>
    </div>
    <div class="content js-content" data-index="4">
       <div class="article">
          <img class="tmln-img" src="img/after-party.png">
        </div>
        <div class="article">
          <h2>Ceremony &amp; Reception</h2>
          <h3>
            Transportation will be provided.
          </h3>
        </div>
        <div class="article">
          <p>Middleton Place<br>
            Saturday<br>
            September 15th<br>
            5:00 PM<br><br>
            <a href="https://www.google.com/maps/place/Middleton+Place/@32.8997941,-80.1365051,15z/data=!4m2!3m1!1s0x0:0x28820167654634ac?sa=X&ved=0ahUKEwiM-ai26fPZAhUHMd8KHURGCk8Q_BIIhgEwEQ" target="_blank">view on map</a>
          </p>
        </div>
    </div>
    <div class="content js-content" data-index="5">
       <div class="article">
          <img class="tmln-img" src="img/after-party.png">
        </div>
        <div class="article">
          <h2>After Party (optional)</h2>
          <h3>
            For those who want to keep the party going. 
          </h3>
        </div>
        <div class="article">
          <p>Uptown Social<br>
            Saturday<br>
            September 15th<br>
            11:30 PM<br><br>
            <a href="https://www.google.com/maps/place/Uptown+Social/@32.7926045,-79.9412328,15z/data=!4m2!3m1!1s0x0:0x8f533b56b2761649?sa=X&ved=0ahUKEwiqgt2F6vPZAhXDk1kKHQPaBbgQ_BIIdzAK">view on map</a>
          </p>
        </div>
    </div>

    <div class="selector">
      <a href="#" class="tmln-button js-button js-active" data-index="1">Group Activity<br>(optional)</a>
      <a href="#" class="tmln-button js-button" data-index="2">Welcome Party</a>
      <a href="#" class="tmln-button js-button" data-index="3">Welcome Drinks</a>
      <a href="#" class="tmln-button js-button" data-index="4">Ceremony &amp;<br> Reception</a>
      <a href="#" class="tmln-button js-button" data-index="5">After Party<br>(optional)</a>
    </div>
  </section>