I'm in search of help with creating a stylesheet switcher for my website. My knowledge of html/css/js is self-taught, so I ask for forgiveness for any beginner mistakes. I have customized some code to fit my requirements, but I am unsure how to target a specific line in the head section.
Here is the current code snippet:
<ul id="nav">
<li><a href="#" rel="http://files.enjin.com/149304/theme-dark.css">Dark</a></li>
<li><a href="#" rel="http://files.enjin.com/149304/theme-light.css">Light</a></li>
</ul>
<script>
$(document).ready(function() {
$("#nav li a").click(function() {
$("link").attr("href",$(this).attr('rel'));
return false;
});
});
$(document).ready(function() {
if($.cookie("css")) {
$("link").attr("href",$.cookie("css"));
}
$("#nav li a").click(function() {
$("link").attr("href",$(this).attr('rel'));
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});
});
$(document).ready(function() {
if($.cookie("css")) {
$("link").attr("href",$.cookie("css"));
}
$("#nav li a").click(function() {
$("link").attr("href",$(this).attr('rel'));
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});
});
</script>
Currently, this code changes all href links in the head section and causes issues with the page layout.
The specific href that requires modification (located on line 22) is as follows:
<link href="./Home - Oceanian Gaming Community_files/theme.php" media="screen" rel="stylesheet" type="text/css">
Any assistance on resolving this issue would be greatly valued.