Simple jQuery css background "chooser"
I wrote this very simple background chooser.
<!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>Choose A 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: Normal.css Print.css Contrast.css
in the same folder with a very ba开发者_StackOverflow社区sic:
body {background-color:#000000;}
When I go to the URL it chooses Normal.css (as it should)
Then it changes to just fine to Print.css or Contrast.css (as it should)
But then it doesn't ´t go back (doesn't ´t choose) Normal.css again?
Can you help me spot what's wrong with the code?
$("#StyleNormal").click(function() {
$("link[@media='screen']").attr("href", "Normal.css");
});
Should be
$("#StyleNormal").click(function() {
$("link[media='screen']").attr("href", "Normal.css");
});
Also, I would update the version of jQuery you're using to 1.4.2
You used [@media='screen'] instead of just [media='screen']
In jQuery 1.4.2 (and I think in jQuery 1.3) @ for attribute selection is deprecated. Notice that you had it right in the first two calls of your code, just not the last one. :D
If you want to optimize, you could add a class (say "switcher") to your links, and change your jQuery to this:
$(function(){
$(".switcher").click(function() {
$("link[media=screen]").attr("href", $(this).text() + ".css");
});
});
加载中,请稍侯......
精彩评论