如何在同一页面的一个 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>