javascript - 在时间轴模板中插入幻灯片

Question

我正在尝试调整此时间轴模板。

我希望通过点击年份分别更改开放期间内的内容

https://codepen.io/TriVector/pen/EPJqqd/

<div id="container">
  <div id="thumbs">
    <div class="history-block bg-66">
      <div class="cover"></div>
      <div class="year">1966 - 1976</div>
      <div class="title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
      <div class="timeline">
        <ul>
          <li><a href="" class="timelineYear">1966</a></li>
          <li><a href="" class="timelineYear">1967</a></li>
          <li><a href="" class="timelineYear">1968</a></li>
          <li><a href="" class="timelineYear">1969</a></li>
          <li><a href="" class="timelineYear">1970</a></li>
          <li><a href="" class="timelineYear">1971</a></li>
          <li><a href="" class="timelineYear">1972</a></li>
          <li><a href="" class="timelineYear">1973</a></li>
          <li><a href="" class="timelineYear">1974</a></li>
          <li><a href="" class="timelineYear">1975</a></li>
          <li><a href="" class="timelineYear">1976</a></li>
        </ul>
      </div>
    </div>
    <div class="history-block bg-76">
      <div class="cover"></div>
      <div class="year">1976 - 1986</div>
      <div class="title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
      <div class="timeline">
        <ul>
          <li><a href="" class="timelineYear">1976</a></li>
          <li><a href="" class="timelineYear">1977</a></li>
          <li><a href="" class="timelineYear">1978</a></li>
          <li><a href="" class="timelineYear">1979</a></li>
          <li><a href="" class="timelineYear">1980</a></li>
          <li><a href="" class="timelineYear">1981</a></li>
          <li><a href="" class="timelineYear">1982</a></li>
          <li><a href="" class="timelineYear">1983</a></li>
          <li><a href="" class="timelineYear">1984</a></li>
          <li><a href="" class="timelineYear">1985</a></li>
          <li><a href="" class="timelineYear">1986</a></li>
        </ul>
      </div>
    </div>
    <div class="history-block bg-86">
      <div class="cover"></div>
      <div class="year">1986 - 1996</div>
      <div class="title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
      <div class="timeline">
        <ul>
          <li><a href="" class="timelineYear">1986</a></li>
          <li><a href="" class="timelineYear">1987</a></li>
          <li><a href="" class="timelineYear">1988</a></li>
          <li><a href="" class="timelineYear">1989</a></li>
          <li><a href="" class="timelineYear">1990</a></li>
          <li><a href="" class="timelineYear">1991</a></li>
          <li><a href="" class="timelineYear">1992</a></li>
          <li><a href="" class="timelineYear">1993</a></li>
          <li><a href="" class="timelineYear">1994</a></li>
          <li><a href="" class="timelineYear">1995</a></li>
          <li><a href="" class="timelineYear">1996</a></li>
        </ul>
      </div>
    </div>
    <div class="history-block bg-96">
      <div class="cover"></div>
      <div class="year">1996 - 2006</div>
      <div class="title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
      <div class="timeline">
        <ul>
          <li><a href="" class="timelineYear">1996</a></li>
          <li><a href="" class="timelineYear">1997</a></li>
          <li><a href="" class="timelineYear">1998</a></li>
          <li><a href="" class="timelineYear">1999</a></li>
          <li><a href="" class="timelineYear">2000</a></li>
          <li><a href="" class="timelineYear">2001</a></li>
          <li><a href="" class="timelineYear">2002</a></li>
          <li><a href="" class="timelineYear">2003</a></li>
          <li><a href="" class="timelineYear">2004</a></li>
          <li><a href="" class="timelineYear">2005</a></li>
          <li><a href="" class="timelineYear">2006</a></li>
        </ul>
      </div>
    </div>
    <div class="history-block bg-06">
      <div class="cover"></div>
      <div class="year">2006-2016</div>
      <div class="title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
      <div class="timeline">
        <ul>
          <li><a href="" class="timelineYear">2006</a></li>
          <li><a href="" class="timelineYear">2007</a></li>
          <li><a href="" class="timelineYear">2008</a></li>
          <li><a href="" class="timelineYear">2009</a></li>
          <li><a href="" class="timelineYear">2010</a></li>
          <li><a href="" class="timelineYear">2011</a></li>
          <li><a href="" class="timelineYear">2012</a></li>
          <li><a href="" class="timelineYear">2013</a></li>
          <li><a href="" class="timelineYear">2014</a></li>
          <li><a href="" class="timelineYear">2015</a></li>
          <li><a href="" class="timelineYear">2016</a></li>
        </ul>
      </div>
    </div>
    <div class="history-block bg-16">
      <div class="cover"></div>
      <div class="year">FUTURE</div>
      <div class="title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
      <div class="timeline">
        To our bright future!!! :)
      </div>
    </div>
  </div>
</div>

我打算在第一个模板中获得一些链接： https ://codepen.io/abhishekraj/pen/WZZKKw

标签： javascripthtmlcss