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

【问题标题】：jQuery append external css file to all HTML pagesjQuery 将外部 css 文件附加到所有 HTML 页面
【发布时间】：2016-03-28 12:42:23
【问题描述】：

我有 2 个不同的 CSS 文件用于 2 个客户端

如果我从 indexer page 中选择 option 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">

但是，此更改必须发生在 pages/

下的所有 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>

【问题讨论】：

为什么不包括其中两个文件。那么只需相应地在body 上添加或删除类？
你了解.load() 的工作原理吗？
嗨@Praveen Kumar...对不起，那只是为了演示..我对脚本没有太多想法:(
嗨 @roullie.. 在这种情况下，我想将 all html pages 归类到 pages/ foler
@Reddy 那么您必须将所选选项保存在某处。数据库、会话、cookies 任你选择。

标签： jquery jquery-load

【解决方案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");
    });
});

【讨论】：

@Praveen Kumar...感谢您的宝贵时间，它仅适用于当前页面...但我想要的是：在 index.html，如果我选择 client1 选项，此页面将导航到加载“client1.css”文件的 client.html 页面.. 并且剩余的 html 页面也应该加载client1.css 文件...请问可以吗？
@Reddy 我建议你去这个插件：jQuery.cookie 并在你改变时设置它。
@Praveen Kumar 再次感谢...将通过它，并为您的答案投票:)...
@Reddy 一切顺利。