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

如果您希望自己的内容具有固定的高度，除了设置PATH之外，请使用TNS_ADMIN

要在每个height:300px上overflow-y:scroll，在您的jQ而不是display:flex使用js-content。 .show基本上赋予元素.css('display','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);

新手 - 内容不在容器中

1 个答案: