Here is a simple background selector that I created.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<title>jQuery Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="Normal.css" />
<script type="text/javascript">
$(document).ready(function(){
$("#StyleContrast").click(function() {
$("link[media='screen']").attr("href", "Contrast.css");
});
$("#StylePrint").click(function() {
$("link[media='screen']").attr("href", "Print.css");
});
$("#StyleNormal").click(function() {
$("link[@media='screen']").attr("href", "Normal.css");
});
});
</script>
</head>
<body>
<h1>Select Your Style:</h1>
<ul>
<li><a id="StyleContrast" href="#">Contrast</a></li>
<li><a id="StylePrint" href="#">Print</a></li>
<li><a id="StyleNormal" href="#">Normal</a></li>
</ul>
</body>
</html>
I have the following files in the same directory:
- Normal.css
- Print.css
- Contrast.css
All with a basic structure like this:
body {background-color:#000000;}
When you initially visit the URL, it displays the Normal.css style (as expected).
You can then switch between Print.css and Contrast.css styles correctly.
However, switching back to Normal.css doesn't work as expected.
Could you identify what might be wrong with the code?