Search code examples
jquerycssstylesheet

How to change from one stylesheet to another with jQuery?

I want to change the style of a page between two different .css files when the user clicks a link.

When the link is clicked, I want the new style to be loaded. When it is clicked a second time, I want the default style to be loaded. (In other words, I want to be able to toggle between two different stylesheets on a click event).

$(function(){
   $('.default').click(function(){
      $('#link').attr('href', 'defaultStyle' );
      $('.default').addClass('new').removeClass('default');
   });

});
$(function(){
   $('.new').click(function(){
      $('#link').attr('href', 'secondStyle' );
      $('.new').addClass('default').removeClass('new');
   });
});

The code above changed the style once, but the second block doesn't work.

How can I fix this? TIA.

Solution

  • try 

    $('.new').live('click',function(){});

    http://api.jquery.com/live/