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

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

获取的使用文档＃querySelectorAll li S和p S中的列表。用.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>