Grow your CSS skills. Land your dream job.

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

  • # January 24, 2013 at 11:29 pm

    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](http://reallycoolstuff.net/JV/ “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?

    # January 24, 2013 at 11:40 pm

    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.

    # January 24, 2013 at 11:46 pm

    @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?

    # January 24, 2013 at 11:50 pm

    @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.

    # January 24, 2013 at 11:57 pm

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

    # January 25, 2013 at 12:19 am

    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.

    # January 25, 2013 at 10:55 am

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

    # January 25, 2013 at 11:05 am

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

    # January 25, 2013 at 4:14 pm

    @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.

    # January 25, 2013 at 5:45 pm

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

    # January 25, 2013 at 7:11 pm

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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".