Question

我为2个客户提供了2个不同的CSS文件

如果我从索引页面中选择选项1 ，则所有内部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>

Answer 1

您有两种选择：

加载两个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");
    });
});

jQuery将外部css文件附加到所有HTML页面

1 个答案: