How to display Multiple Link within one div of same page

Question

I am a Beginner and just learnt HTML5, CSS3 and a little bit java script. while practicing for a project i got stacked. I want to know How to display Multiple Link within one div of same page without creating different pages. Your answer should be using HTML5, CSS3 and javascript only. screen shot is attached I want like it. First link is active by default.

screenshot 2

screenshot 1

Answer 1

I don't know if this fits in your project, you can use an anchor tag to an element id. Let's say we have a link like this

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

and have in the same HTML file a element you want to scroll to

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

when the link is clicked will scroll to that id

see this answer

Hope this can be helpful.

UPDATE:

for the active menu item, you will need to use JavaScript. Let's say

 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>