jQuery – Dynamically swap out text or element on click

I love this snippet! I used it in this way: Say I have a tabbed list/slider but my tab header titles are running down the side of the page in a column. To bring more attention to which tab a user is on, I made a faux title at the top of the page where the title would dynamically swap out with the name of whichever tab the user had clicked on.

$("#nameoflist >li a").click(function (ev) {  //Every time a user clicks on a link in a list
       var _crumb = 'your-static-text ' + $(this).text();   //Append static text and/or dynamic text
       $('li.destination').text(_crumb);                    //to any given destination.. ie. li class='destination'

-credit to Larry for sharing this tip!

About Steven Chu

Hi, I'm Steven! I'm an entrepreneur, photographer and art director in New York. Follow this blog for self expression, fun, and most importantly: looking comfortable, at ease, and amazing in your photos no matter who takes them! I dedicate this to my amazing friends who have let me inadvertently turn all of our hangouts and travel photos into a never ending photoshoot of fun. The proof is in the pudding-- our photos rock. My other projects: I'm the founder of InstaTechie.com, a face-to-face tech concierge service for NYC. Book a techie to walk you through something you want to learn! My work focuses on socially engaged art projects which use technology to create access to resources for communities. Visit Steven Chu Studio (stevenchustudio.com) for branding & design work or Steven Chu (stevenchu.com) for photography projects.

Leave a Reply