LUCiD GRAFiX Logo

Video tutorials
YouTube RSS Feed
Search

VIDEO TUTORIAL

jQuery Tip 3 Style Sheet Switcher

*Set the video to HD for best viewing experience.
Written by Posted on August 18th, 2013 No Comments
Share This

jQuery Tip 3 Style sheet Switcher.

What we are doing today is making 3 buttons that are going to switch the style sheet. This could be helpful if you had different target audiences and want to to give them the chance to switch to there preferred styles. If you had kids and had some really colorful styles or business style for a more professional look.

Markup

CSS

 jQuery

I changed the reset click event href to ” “, Which works faster. In a real example you would probably would want a default sheet to put in there.

Essentially what were are doing is just playing with attributes. We are just changing the href attribute of the link in the head of the document and then populating a p tag with what button we clicked.

Happy Coding!

Check out the Demo! Download files!

About

Hi, my name is Eric Young. I’m a web designer who has worked in the IT industry since 2000. I love blogging and making the web a better place. If I'm not here I'm probably playing Gears of War. LOL

Related Articles You Might Enjoy!

jQuery Animated Named Anchor Scroll jQuery Animated Named Anchor Scroll
jQuery Tip #1 Tooltip jQuery Tip 1 Tooltip
Photo swap jQuery Tip 2 Photo Swap
Leave a comment

Leave a Reply