如何在同一頁面的一個 div 中顯示多個鏈接

Question

我是初學者，剛剛學習了 HTML5、CSS3 和一點點 java 腳本。 在為一個項目練習時，我被堆積了。 我想知道如何在同一頁面的一個 div 中顯示多個鏈接而不創建不同的頁面。 您的答案應該只使用 HTML5、CSS3 和 javascript。 附上屏幕截圖我想要它。 默認情況下，第一個鏈接處於活動狀態。

截圖 2

截圖 1

Answer 1

我不知道這是否適合您的項目，您可以將錨標記用於元素 ID。 假設我們有這樣的鏈接

<a hrfe="#el-to-scroll">Scroll to a element</a>

並在同一個 HTML 文件中有一個要滾動到的元素

<div id="el-to-scroll"></div>

單擊鏈接時將滾動到該 ID

看到這個答案

希望這會有所幫助。

更新：

對於活動菜單項，您需要使用 JavaScript。 比方說

 document.querySelectorAll('#menu-items > a:not(.active)').forEach(link => { link.addEventListener('click', () => { //prev menu active const prev = document.querySelector('#menu-items >.active'); // remove active class prev.classList.remove('active'); // add active class link.classList.add('active') }) })

 .active { background-color: #000; color: #fff; } #menu-items > a { padding: 5px 10px; }

 <div id="menu-items"> <a href="#" class="active">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 3</a> <a href="#">Item 4</a> </div>