jQuery的追加外部CSS文件中的所有HTML頁面

如果我選擇選項1從索引頁 2個不同的CSS文件，裏面所有的html頁面應該追加下面的css文件：

<link rel="stylesheet" type="text/css" href="css/client1.css">

，或者如果我選擇選項2，那麼它應該加載下面的CSS文件：

<link rel="stylesheet" type="text/css" href="css/client2.css">

但是，這個變化有可能發生的所有HTML文件是下頁/

Indexer.html

<select class="selInput" id="selectClient"> 
    <option>-- Select Client --</option> 
    <option value="client1">Client 1</option> 
    <option value="client2">Client 2</option> 
</select> 

<script> 
$(document).ready(function(){ 

    $(document).on("change", "#selectClient", function(){ 
     jQuery(this).find("option:selected").each(function(){ 
      if($(this).attr("value")=="client1-script"){ 
       $("body").load("css/client1.css"); 
      } 
      else if($(this).attr("value")=="client2-script"){ 
       $("body").load("css/client2.css"); 
      } 
     }); 
    }); 

}); 

</script>

來源

2015-12-22 Reddy

爲什麼不包括這些文件2。那麼只需在'body'上添加或刪除類就可以了？ – roullie

你甚至知道'.load（）'是如何工作的嗎？ –

嗨@Praveen Kumar ...對不起，這只是演示..我沒有太多的想法腳本:( – Reddy

你有兩個選擇要做：

加載CSS和使用類有差異。

考慮client1.css：

body.client1 { /* rules */ } 
body.client1 h1 { /* rules */ } 
body.client1 p { /* rules */ } 
body.client1 ul, 
body.client1 ol { /* rules */ }

考慮client2.css：

body.client2 { /* rules */ } 
body.client2 h1 { /* rules */ } 
body.client2 p { /* rules */ } 
body.client2 ul, 
body.client2 ol { /* rules */ }

而在你的HTML：

<body class="client1"> <!-- if client 1 --> 
<body class="client2"> <!-- if client 2 -->

在你的JavaScript：

$(function() { 
    $("body").on("change", "#selectClient", function() { 
     $("#body").removeClass("client1 client2").addClass("client" + $(this).val()); 
    }); 
});

使用<link />與id並更改href。

在你<head>：

<link rel="stylesheet" type="text/css" href="css/client1.css" id="style" />

在你的JavaScript：

$(function() { 
    $("body").on("change", "#selectClient", function() { 
     $("#style").attr("href", "css/client" + $(this).val() + ".css"); 
    }); 
});

來源

2015-12-22 09:45:21

** @ Praveen庫馬**。 ..感謝您的時間，它只適用於當前頁面...但我想要的是：在** index.html **，如果我選擇**客戶端1 **選項，此頁面導航到** client.html加載「client1.css」文件的**頁面還剩下的HTML頁面也應該加載** client1.css **文件...請問可以嗎？ – Reddy

@Reddy我建議你去這個插件：['jQuery.cookie']（https://github.com/carhartl/jquery-cookie），並在你改變時設置它。 –

** @ Praveen Kumar **再次感謝...將通過它，並upvote您的答案以及:)）... – Reddy

jQuery的追加外部CSS文件中的所有HTML頁面

回答

相關問題