Question

所以我只是通过freecodecamp课程来研究Web开发。我正在做第一个项目：“致敬页”，我想做一个交互式的时间表：单击一年，它会显示当年发生的事情的文本内容。

我已经在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>

Answer 2

您可以只在第一个div中使用内联样式来覆盖css display:none;

$(".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.3.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" style="display: block;">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>

在页面加载时显示第一个div，在我点击另一个锚点时将其隐藏

2 个答案: