在连续用户点击时加载不同的CSS文件，而无需重新加载HTML页面？ CSS布局必须更改onclick

Question

我正在构建一个小型网站，当用户点击其中一个菜单时，当前的css布局必须更改，并且必须在没有页面重新加载的情况下形成新的css布局。我的意思是，横幅保持不变，但它下面的完整的CSS布局被重新部署[包含横幅重新加载下面的布局的CSS文件]。这必须在没有重新加载HTML页面的情况下发生。我怎样才能实现这一目标？我目前正在考虑拥有2个不同的CSS文件。但是如何在不重新加载页面的情况下应用CSS？

提前致谢。

Answer 1

您可以使用1个css文件，例如下面的

BODY.Template1  H1 {
}
BODY.Template1  P {
}
BODY.Template1  A {
}

BODY.Template2  H1 {
}
BODY.Template2  P {
}
BODY.Template2  A {
}

在你的jquery，onload中，你选择一个模板

$(document).ready(function() {
    $('BODY').addClass('Template1');
});
$(element).click(function() {
    $('BODY').removeClass('Template1').addClass('Template2');
});

根据您将拥有的模板大小，模板数量，您可能希望将它们放入单独的文件中。然后，您必须在用户点击它时动态下载每个文件，这可能会导致用户点击按钮时出现延迟。