Question

我有一些步骤的表格。所有步骤都随着AJAX的变化而变化。一切都很好。但是现在我有一个问题。我想为不同的步骤加载不同的CSS文件。就像表单在 step1 上时，step1.css将被加载，而表单在 step2 上时，step2.css将被加载。

是否可以通过更改AJAX来更改CSS文件？

希望我已经很好地解释了我的问题。

Answer 1

new Handler().postDelayed(
    new Runnable(){
        @Override
        public void run() {
            tabview.getTabAt(yourTabIndex).select();
        }
}, 100);

或者相反，您可以通过使用选择器分隔步骤来分隔您的步骤，例如明智的分隔，然后使用类或ID

Answer 2

您可以通过JavaScript来实现自己的目的，但是我强烈建议您反对它。

每次将新样式表插入页面时，都会强制浏览器重新呈现页面（性能）
大多数情况下，这些新CSS文件仅包含少量不值得与服务器连接的代码（速度）

首选方法是在此处使用CSS类并立即加载所有CSS规则。

.form-step-one span {
  background-color: gray;
}

.form-step-two span {
  background-color: cyan;
}

<div class="form-step-one">
  <span>Step 1</span>
  <span>Question:</span>
</div>

<div class="form-step-two">
  <span>step 2</span>
  <span>Question:</span>

</div>

额外提示：为了获得更高的效率，您需要查看Sass和类似Gulp的构建工具，以自动执行该过程并将CSS规则写入不同的文件中，然后将它们全部加载到您的应用程序中一个合并的文件。

AJAX表单中不同步骤的不同CSS文件

2 个答案: