簡單的jQuery css背景「選擇器」

我寫了這個非常簡單的背景選擇器。簡單的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>

我： Normal.css Print.css Contrast.css在同一文件夾

一個非常基本的：

body {background-color:#000000;}

當我去到URL它選擇Normal.css（因爲它應該）

然後，它改變就好了Print.css或Contrast.css（因爲它應該）

但是它不會返回（不會選擇）Normal.css了嗎？

你能幫我看看代碼有什麼問題嗎？

來源

2010-10-06 Trufa

$("#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

來源

2010-10-06 15:33:11

嘿！非常感謝你！！像魅力一樣工作！我不明白爲什麼，你能解釋一下嗎？謝謝！ – Trufa 2010-10-06 15:39:14

當然！看我的編輯。另外，如果這對你有效，請將我的答案標記爲已接受：D – 2010-10-06 15:43:19

好了，我真的不能發現它！特別是因爲jQuery的「官方」教程是錯誤的http://docs.jquery.com/Tutorials:5_Quick_jQuery_Tips#Switch_A_Stylesheet我會嘗試編輯它！非常感謝！該網站告訴我，等待時間結束後，我必須等待5分鐘才能接受答案。乾杯！！ – Trufa 2010-10-06 15:49:29

如果要優化，你可以添加一個類（說「切換」）到您的鏈接，並改變你的jQuery這樣的：

$(function(){ 
    $(".switcher").click(function() { 
     $("link[media=screen]").attr("href", $(this).text() + ".css"); 
    }); 
});

來源

2010-10-06 15:39:13 Ender

謝謝！現在我將嘗試解決基本開關問題。 – Trufa 2010-10-06 15:43:51

簡單的jQuery css背景「選擇器」

回答

相關問題