Help needed with my navigation links

Help needed with my navigation links
0

#1

On my tribute page: https://codepen.io/Crimson_Macaw/pen/xJGbMv I’ve created a small navigation menu at the bottom with 5 links. What I want is for each of the links to display more information about each topic in the column to the right whenever they’re clicked on. However, all the information from the previously chosen link should be removed. Also, when one of the links is chosen I want its class name changed to ‘active’. How is this done? I know that a large part of is done through JavaScript/jQuery, but I’ve forgotten how exactly.


#2

What you want is kidda long to explain in one run, but i’ll try to do step by step:

  1. Don’t use <a> tags to change the information, they serve for links to another pages. Try a <span> with a class that you’ll use to select them in JS. Like <span class="links">The Secret of Monkey Island</span>.
  2. Put something to identify each of one of the links, id is a good one, for example.
  3. On the place you wanna display the informations create a template HTML that’ll serve as the place you’ll put your data in. Create a place to put the title, the text and the img for example, then throught JS you will change the data that is displayed.
  4. Now for the JS part. Create an object that hold all the data you’ll need and inside that put every one of your links inside an object. Like that: data = { link1: { title: ' The Secret of Monkey Island', text: 'Lorem ipsum...', img: 'cover1.jpg'}, link2: { title: ' Monkey Island 2: LeChuck's Revenge', text: 'Lorem ipsum...', img: 'cover1.jpg'}}.
    Make sure the id you put will match the name of each object.
  5. Select all the links and add a event listener on them, that event will call the function that’ll replace the data on your template HTML.
  6. Make a that function, remember that you need to select the template and then alter they content.

Hope that clear the water for you. That’s only one of the possibles ways to do it, so don’t treat like the one answer to your question. Any doubt, just ask.
Happing code.

PS. Love the Monkey Island games, great site you put out.