javascript - 如何将按钮连接到垂直滑动时变化的文本？

Question

我不知道这对于谁来回答这个问题是否是一个费力的问题，在这种情况下我很抱歉，但我迷路了，这是交易:

我在页面左侧有一个垂直导航栏，右侧有一些文本。导航的每个按钮都有自己的文本，我希望它是这样的:每次单击其中一个按钮时，实际文本滑动(向上或向下)，为其他文本留出空间。

我需要它在同一个页面中，而不改变链接(换句话说，没有“a”标签)。我需要 JavaScript 来执行此操作，还是只能通过 CSS 来完成？

在 JavaScript 的情况下，我认为它应该通过 onClick 事件来完成，但我不知道在这种情况下如何进行。有人可以帮我吗？我希望我已经把我的问题说清楚了，因为我的英语不流利。

下面是一个非常简单的演示，希望对你有用: https://jsfiddle.net/4cgsn76t/3/

<ul>

<li>Button 1</li>
<li>Button 2</li>
<li>Button 1</li>
<li>Button 2</li>
</ul>
<!-- Text below connected to Button 1 -->
<p>
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
</p>
<!-- Text below connected to Button 2 -->
<p>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
</p>

ul {

  float:left;
}

ul li {
  list-style:none;
  width:100px;
  height: 30px;
  background:blue;
  margin-top:15px;
  margin-right:30px;
  color:white;
  border-radius:5px;
  cursor:pointer;
}

p {
  width:300px;
  float:left;
  font-size:12px;
}

p:nth-child(2) {
  display:none;
}

Answer 1

使用 Document#querySelectorAll 获取 li 和 p 的列表。使用 .forEach() 迭代列表项，并为每个项添加一个事件监听器。单击一个时隐藏所有段落，并显示相关文本:

var para = document.querySelectorAll('p');

document.querySelectorAll('li').forEach(function(el, i) {
  el.addEventListener('click', function() {
    para.forEach(function(p) {
      p.style.display = 'none';
    });

    para[i].style.display = 'block'
  });
});

ul {
  float: left;
}

ul li {
  list-style: none;
  width: 100px;
  height: 30px;
  background: blue;
  margin-top: 15px;
  margin-right: 30px;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

p {
  width: 300px;
  float: left;
  font-size: 12px;
}

p:not(:first-child) {
  display: none;
}

<ul>
  <li>Button 1</li>
  <li>Button 2</li>
</ul>
<div>
  <!-- Text below connected to Button 1 -->
  <p>
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
    animi, id est laborum et dolorum fuga."
  </p>
  <!-- Text below connected to Button 2 -->
  <p>
    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
  </p>
</div>