javascript - 简单的 jQuery css 背景 "chooser"

标签 javascript jquery css

我写了这个非常简单的背景选择器。

<!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>

我有: 普通.css 打印.css 对比度.css

在同一个文件夹中有一个非常基本的:

body {background-color:#000000;}

当我转到 URL 时,它会选择 Normal.css(它应该如此)

然后将其更改为 Print.css 或 Contrast.css(应该如此)就可以了

但是它不会再返回(不选择)Normal.css 了吗?

你能帮我找出代码中的问题吗?

最佳答案

 $("#StyleNormal").click(function() { 
       $("link[@media='screen']").attr("href", "Normal.css"); 
     }); 

应该是

 $("#StyleNormal").click(function() { 
       $("link[media='screen']").attr("href", "Normal.css"); 
     }); 

此外,我会将您使用的 jQuery 版本更新为 1.4.2

您使用了 [@media='screen'] 而不仅仅是 [media='screen']

在 jQuery 1.4.2 中(我认为在 jQuery 1.3 中)用于属性选择的 @ 已被弃用。请注意,您在代码的前两次调用中都是正确的,而不是最后一次。 :D

关于javascript - 简单的 jQuery css 背景 "chooser",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3874188/

相关文章:

javascript - 带有背景图像的 Jquery 悬停类淡入淡出

javascript - 谷歌地图 API v3 : is there any function to check if a coordinate is inside a province or country

javascript - 如何使自定义登录按钮工作

java - JSTL:在自定义标签中使用 scriptlet

javascript - 如何在鼠标悬停在文本上时添加提示框

jQuery 多级 CSS 菜单悬停不工作

css - 对于某些媒体查询,如何将右侧 div float 到左侧,将左侧 div float 到右侧 div 下方

html - Magento 的自定义 header

javascript - Bootstrap 轮播重置为默认设置

javascript - 在一个云函数中从firebase数据库检索多个数据