Result
http://jsfiddle.net/kachibito/J7WHf/embedded/result,js,css,html
jQuery
$("a.css-switch").click(function() { //link rel="***"を変える $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); });
css
h1{ font-size:40px; font-weight:bold; margin:25px; //Google font API font-family: 'Fredericka the Great','Jim Nightshade', 'Flamenco', cursive; } a{text-decoration:none;color:red;} a:hover{color:#666;}
html
<a href="javascript:void(0);" class="css-switch" rel="default.css">Default </a> | <a href="javascript:void(0);" class="css-switch" rel="http://fonts.googleapis.com/css?family=Fredericka+the+Great">Fredericka the Great</a> | <a href="javascript:void(0);" class="css-switch" rel="http://fonts.googleapis.com/css?family=Jim+Nightshade"> Nightshade</a> | <a href="javascript:void(0);" class="css-switch" rel="http://fonts.googleapis.com/css?family=Flamenco:300"> Nightshade</a> <h1>Sample</h1>