I am unsure what your problem is as there could be many, so I'll outline a few here. I've also tried to improve it a bit.
First off, you haven't mentioned where your script is in your page. If you put this in the head, then you need to wrap it in a $("document").ready(function(){}); listener, otherwise your buttons won't be found.
Secondly, you don't need it but it's best practise to pass the event and prevent the default action on buttons. It won't matter now, but just keep doing it.
Thirdly, you are repeating yourself a bit, so why not wrap it in a function you can call easily? Heres what all this looks like:
function switchStyleSheets(theme, print){
$('link[title="theme"]').attr('href', theme);
$('link[media="print"]').attr('href', print);
}
$(document).ready(function(){
$('#default').click(function(event){
event.preventDefault();
switchStyleSheets(
'_includes/css/default_style.css',
'_includes/css/default_print.css'
);
});
$('#monochrome').click(function(event){
event.preventDefault();
switchStyleSheets(
'_includes/css/print_style.css',
'_includes/css/print_print.css'
);
});
$('#annotation').click(function(event){
event.preventDefault();
switchStyleSheets(
'_includes/css/annoted_style.css',
'_includes/css/annoted_print.css'
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button id="default">Default</button>
<button id="monochrome">Monochrome</button>
<button id="annotation">Annotations</button>
But this is not good practise either! You are switching our files that need to be loaded in every time you switch. The reason this is bad is that the file needs time to load, and in the meanwhile you lose all your styling! It might not seem like much if your files are a couple of kilobytes, but larger files and slower connections start making this bad! So here a better solution:
$(document).ready(function(){
/* To easily remove all styles later, lets make a string that lists them all */
var allStyles = "";
$("button[data-style]").each(function(){
/* Add the data-style attribute to the all string */
allStyles += $(this).data("style") + " ";
}).click(function(event){
/* Get the class from the button */
var style = $(this).data("style");
/* Remove all the classes, then add this single on */
$("body").removeClass(allStyles).addClass(style);
});
});
/* Define all your classes as body classes */
body.default {
background: red;
}
body.mono {
background: black;
}
body.annotated {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!-- Give every button a data-style attribute or value that we can read on click. -->
<button id="default" data-style="default">Default</button>
<button id="monochrome" data-style="mono">Monochrome</button>
<button id="annotation" data-style="annotated">Annotations</button>
You also mention that the CSS is hugely different for the print files. Well, thats what media queries are made for. The following will allow you to define everything in one file:
body.default {
background: red;
}
body.mono {
background: black;
}
body.annotated {
background: blue;
}
@media print {
body.default {
background: red;
}
body.mono {
background: black;
}
body.annotated {
background: blue;
}
}
The whole purpose is to learn to use media queries efficiently. Now, there are limitations to this (IE has rule limitations), but it is better practise than switching out files on the fly.
