如何將按鈕連接到在垂直幻燈片上更改的文本？

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>