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()迭代列表项，并为每个项添加事件侦听器。单击一个时隐藏所有段落，并显示相关文本：

＆＃13;

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'
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如何将按钮连接到垂直幻灯片上更改的文本？

1 个答案: