Javascript smoothState.js：将类添加到#主包装器

我正在使用smoothStates默认设置，我想知道是否可以向主包装器添加一个类，以便更改站点的背景色？我不想在main下添加另一个div，因为它只是额外的标记

目前，我只能添加页面索引，然后其他页面不会更改，因为smoothState不会再次加载页面

编辑：所以我想为每个页面添加一个类，比如：

页面索引

，

页面关于

等等

我有一个这样的部门：

<div id="main">
 // stuff here
</div>

<div id="main" class="page-news">
 // stuff here
</div>

---

要实现您想要的，您可以在后面使用

onAfter

将新内容注入页面且所有动画完成时运行的函数。此时需要重新初始化页面所需的任何插件

创建一个函数：

function addClass() {
    $('#main').addClass('your_class second_class');
};

然后将其注入到smoothState初始化中：

$(function(){
'use strict';
var options = {
  prefetch: true,
  cacheLength: 2,
  onStart: {
    duration: 250, // Duration of our animation
    render: function ($container) {
      // Add your CSS animation reversing class
      $container.addClass('is-exiting');

      // Restart your animation
      smoothState.restartCSSAnimations();
    }
  },
  onReady: {
    duration: 0,
    render: function ($container, $newContent) {
      // Remove your CSS animation reversing class
      $container.removeClass('is-exiting');

      // Inject the new content
      $container.html($newContent);

    }
  },
  onAfter: function($container, $newContent) {
    addClass();
  }
},
smoothState = $('#main').smoothState(options).data('smoothState');
});

---

更新：如何动态设置类：

<!-- HTML -->
<div id="cms-classes" class="Put your classes in here">
</p>

/* CSS */
#cms-classes { display: none }

// JavaScript
function addClass() {
    cmsClasses = $('#cms-classes').attr('class');
    $('#main').addClass(cmsClasses);
};

/*CSS*/
#cms类{显示：无}
//JavaScript
函数addClass（）{
cmsClasses=$（“#cms类”）.attr（'class'）；
$（'#main'）.addClass（cmsClasses）；
};

---

希望这有帮助

---

您想什么时候添加该类？之后，在动画的中间？嗨，从人们访问主页的时候开始。你说的是什么意思？所有动画完成后？如果您想在访问者加载站点时添加类，则不要通过smoothState进行添加。然后使用

窗口。onload

问题是smoothState不会再次重新加载页面，如果我执行F5，我可以更改类名，然后确保我看到了更改，只是当你从一页到另一页单击时，它只会显示页面索引类。@EmmaStone抱歉，我不知道为什么我把我的答案从

onAfter

改为

onReady

：）不用担心@jonhue:）明天我会尝试代码示例，只是一个简单的问题，当你说：“.addClass（'your_class second_class'）；”我不知道所有的类，因为类名来自我工作的CMS。。。它是否可以不查看是否有类更改，然后将该更改添加到新页面加载中？我对所有这些都是新手，请原谅我的愚蠢问题：）好的“CMS”我将使用WordPress，但也尝试过Jekyll，但也没有运气（我在答案中附加了一种“动态”添加类的方法。哦，我明白了这也是一种方法。我当时正在使用jquery来更改页面类并将其附加到正文中，但它并不适用于所有页面。）(

<!-- HTML -->
<div id="cms-classes" class="Put your classes in here">
</p>

/* CSS */
#cms-classes { display: none }

// JavaScript
function addClass() {
    cmsClasses = $('#cms-classes').attr('class');
    $('#main').addClass(cmsClasses);
};