jquery - 在页面加载时显示第一个 div，并在我单击另一个 anchor 时隐藏它

Question

所以我只是通过 freecodecamp 类(class)深入研究 Web 开发。我正在做第一个元素:“致敬页面”，我想制作一种交互式时间轴:您单击一年，它会显示关于那一年发生的事情的文本内容的 div。

我已经设法在 Stack Overflow 中找到它，但我似乎无法让第一个 div 在网页加载时显示，所以它不仅仅是一个空白区域。

到目前为止，这是我的代码:

$(".link").click(function(e) {
  e.preventDefault();
  $('.content-container div').fadeOut('slow');
  $('#' + $(this).data('rel')).fadeIn('slow');
});

.content-container {
  position: relative;
  width: 400px;
  height: 400px;
}
.content-container div {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="tribute-info">
  <ul id="timeline">
   <li><a class="link" href="#" data-rel="content1"> 1911 </a> </li>
   <li><a class="link" href="#" data-rel="content2"> 1923 </a> </li>
   <li><a class="link" href="#" data-rel="content3"> 1932 </a> </li>
   <li><a class="link" href="#" data-rel="content4"> 1943 </a> </li>
   <li><a class="link" href="#" data-rel="content5"> 1954 </a> </li>
   <li><a class="link" href="#" data-rel="content6"> 1957 </a> </li>
  </ul>
 <div class="content-container">
  <div id="content1">This is the test content for part 1</div>
  <div id="content2">This is the test content for part 2</div>
  <div id="content3">This is the test content for part 3</div>
  <div id="content4">This is the test content for part 4</div>
  <div id="content5">This is the test content for part 5</div>
  <div id="content6">This is the test content for part 6</div>
  <div id="content7">This is the test content for part 7</div>
 </div>
</div>

Answer 1

希望我的代码片段能以某种方式帮助您。

祝你有美好的一天!

// use this to show any content by id
$('#content1').fadeIn('slow');

$(".link").click(function(e) {
  e.preventDefault();
  $('.content-container div').fadeOut('slow');
  $('#' + $(this).data('rel')).fadeIn('slow');
});

.content-container {
position: relative;
width: 400px;
height: 400px;
}
.content-container div {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="tribute-info">
  <ul id="timeline">
   <li><a class="link" href="#" data-rel="content1"> 1911 </a> </li>
   <li><a class="link" href="#" data-rel="content2"> 1923 </a> </li>
   <li><a class="link" href="#" data-rel="content3"> 1932 </a> </li>
   <li><a class="link" href="#" data-rel="content4"> 1943 </a> </li>
   <li><a class="link" href="#" data-rel="content5"> 1954 </a> </li>
   <li><a class="link" href="#" data-rel="content6"> 1957 </a> </li>
  </ul>
   <div class="content-container">
    <div id="content1">This is the test content for part 1</div>
    <div id="content2">This is the test content for part 2</div>
    <div id="content3">This is the test content for part 3</div>
    <div id="content4">This is the test content for part 4</div>
    <div id="content5">This is the test content for part 5</div>
    <div id="content6">This is the test content for part 6</div>
    <div id="content7">This is the test content for part 7</div>
   </div>
  </div>