2

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

Technical jangra
  • 51
  • 4
  • 3
    Please explain better what you mean, and include some code. – i.brod Apr 03 '20 at 19:29
  • 1
    Welcome to stackoverflow. Since you are new to the site a few things: NEVER include pictures without any code. Show us what you have tried so far and what you want to achieve. Also SO is NOT a coding service. Please edit your question and I'll help you out. – Aaron Apr 03 '20 at 19:29
  • I believe you are looking for tabs functionality. You can check this out. https://css-tricks.com/functional-css-tabs-revisited/. – SpiritOfDragon Apr 03 '20 at 19:32
  • Hey @i.brod thanks for reply. I have attached a screenshot exact what i want. – Technical jangra Apr 03 '20 at 19:37
  • @SpiritOfDragon Thanks for your solution. That's what i wanted. Thank You thanks a lot. Also i Want to know is there any another method also to solve this problem. If yes then please reply. – Technical jangra Apr 03 '20 at 19:50
  • @Technicaljangra this is the most efficient way as you are just using HTML and CSS – SpiritOfDragon Apr 03 '20 at 19:57

1 Answers1

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>
osmar reyes
  • 19
  • 4