treehouse : what would you like to learn today?
Web Design Web Development iOS Development

How Can i Replace Text When a Navigation Button is Clicked?

  • I want to be able to replace a certain text on my website, when a navigation button is clicked. I know this is probably very easy but i'm not that experienced with JavaScript. The ribbon on this Website has text that corresponds to the category. When a person clicks on the "completed project", or any of the other nav links i want the text inside the ribbon to be replaced according to the tab clicked. How can i achieve this?

  • Well, you could use jQuery or vanilla JavaScript (either can get you to your desired result) to get what you want. All you have to do is check if the menu items are clicked and if they are, update the ribbon with the text of the link. Here's a quick example: http://codepen.io/anon/pen/rqJHm.

  • @srig99 i actually don't want to update the ribbon at all. I don't want it to appear as if the website or anything is reloading the same thing. Could this be done with CSS?

  • @Jarolin So do you want to update the ribbon when you hover over the links? I thought you wanted to update the ribbon because in the question, you stated that you wanted to replace the text inside the ribbon...Can you please elaborate? Thanks.

  • @srig99 i only want the text replaced. Not the entire ribbon image. Only the text inside it.

  • I looked around in your website's code and found the span (with the id 'navlabel') that you're talking about. You can use:

    document.getElementById("navlabel").innerHTML="New Text";
    

    to replace the span's text with new text once a menu item is clicked.

  • @srig99 yea, i was trying to do it with Javascript but for some reasong it would not work. I'm not sure why.

  • Hey, the text is changed. how do i make it that it changes when a tab button is clicked?

  • @Jarolin Hey, I made a new pen with the span changing according to the current link that is clicked. Check it out: http://codepen.io/anon/pen/AtLmx. Let me know if that's what you want.

  • @srig99 I still can't get it to work. i'm 100% sure im doing something wrong.

  • @Jarolin Can you make a pen on Codepen for me? It will help me understand your problem better.