我需要切換上點擊網頁上的鏈接我的樣式表，這樣的頁面顯示在不同的顏色主題

HTML我需要切換上點擊網頁上的鏈接我的樣式表，這樣的頁面顯示在不同的顏色主題

<head> 
    <style type="text/css> 
     @import url("style.css") //my main css file 
    </style> 
    // css file which contains only color properties. 
    <link href="theme_blue.css" rel="stylesheet"> 
</head> 

<body> 
    <a href="#" id="theme-blue">Click Here to switch color</a> 
</body>

CSS（theme_blue.css）

body 
{ 
    background-color:#66ccff; 
}

$(document).ready(function() { 
    $("#theme-blue").click(function() { 
     $("link").attr("href", "theme_blue.css"); 
     return false; 
    }); 
});

我的問題是，當我點擊鏈接，網頁的整個結構丟失，沒有顏色變化發生。我對這項技術很陌生，需要專家的幫助。請提出解決方案來解決這個問題。

來源

2014-09-23 Suganya Yuvaraj

http://stackoverflow.com/questions/7846980/how-do-i-switch-my-css-stylesheet-using-jquery – Ankith 2014-09-23 10:02:05

儘量不要使用'@ import'。它減慢你的頁面速度... – algorhythm 2014-09-23 16:44:23

你的問題是你的jQuery選擇器。您正在將屬性href應用於所有鏈接元素，包括您的主CSS鏈接。我建議你把你的鏈接和ID，然後更新您的選擇：

<head> 
    <style type="text/css> 
     @import url("style.css") //my main css file 
    </style> 
    // css file which contains only color properties. 
    <link id="css_theme_blue" href="theme_blue.css" rel="stylesheet"> 
</head> 

<body> 
    <a href="#" id="theme-blue">Click Here to switch color</a> 
</body>

jQuery的

$(document).ready(function() { 
    $("#theme-blue").click(function() { 
     $("#css_theme_blue").attr("href", "theme_blue.css"); 
     return false; 
    }); 
});

也許我提供，我練的另一個解決方案

HTML。

我有我的樣式表，但我改變了體類以反映我想要一個特定元素的樣子。

然後我換了身上課的時候我想的主題改變：因爲所有的風格都在開始加載，不會有停頓

$('#blue-theme-button').on('click', function() { 
$(body).removeClass('green_theme').addClass('blue_theme'); 
}

這種方法優於我在加載新樣式表時加載速度較慢的機器上。

來源

2014-09-23 10:12:07 user3416023

Thanks.i試圖添加id鏈接標記，但這次我單擊鏈接沒有任何反應。是否有任何其他方法來實現這一點？ – 2014-09-23 11:36:56

你更新了你的jQuery選擇器嗎？ – user3416023 2014-09-23 13:40:34

我編輯了我的答案，給你一個不同的解決方案，我認爲你可能會更好。 – user3416023 2014-09-23 13:54:24

假設你在/ Content文件夾中有兩個css文件。

主theme.css：

body { 
    background-color:#fff; 
}

藍theme.css：

body { 
    background-color: blue; 
}

你有它默認主theme.css使用和link元素有ID的頁面#siteTheme ，你也有可點擊的元素與ID #blueTheme

<link id="siteTheme" href="/Content/main-theme.css" rel="stylesheet" type="text/css" /> 
<a href="#" id="blueTheme">Activate Blue Theme</a>

所有你需要的是寫#blueTheme clic K，這改變了鏈接元素的href屬性值與ID #siteTheme：

<script> 
      $(document).ready(function() { 
       $("#blueTheme").click(function() { 
        $("#siteTheme").attr("href","/Content/blue-theme.css"); 
       }); 
      }) 
</script>

我希望這將幫助;），不要忘了寫這些腳本之前加載jQuery的。

<script src="/Scripts/jquery-1.10.2.min.js"></script>

來源

2014-09-23 14:13:53 Dimitri

我需要切換上點擊網頁上的鏈接我的樣式表，這樣的頁面顯示在不同的顏色主題

回答

相關問題