如何为jQuery UI默认标签页的活动内容div添加active样式

嘿，这个需求我之前做项目时刚好处理过，不用去修改jQuery UI的源码，只需要利用它提供的内置事件就能轻松实现！

核心思路 #

jQuery UI Tabs的默认行为确实只给激活的标签（<li>）加了active类，但它提供了activate和create两个事件，我们可以通过这两个事件来同步给对应的内容面板添加/移除样式。

完整实现代码 #

$(function() {
  // 初始化Tabs组件
  $("#tabs").tabs({
    // 当标签切换完成后触发
    activate: function(event, ui) {
      // 移除上一个激活面板的active类
      ui.oldPanel.removeClass("active");
      // 给新激活的面板加上active类
      ui.newPanel.addClass("active");
    },
    // 组件初始化完成时触发（处理初始状态）
    create: function(event, ui) {
      // 给默认激活的面板添加active类
      ui.panel.addClass("active");
    }
  });
});

代码细节解释 #

• activate事件：每次切换标签后都会触发，ui对象里的oldPanel是之前显示的内容面板，newPanel是刚切换过来的面板，我们只需要对这两个元素进行类的操作即可。
• create事件：页面加载完成初始化Tabs时触发，这时候要给默认选中的内容面板加上active类，不然初始状态下内容面板不会有样式。

自定义样式示例 #

如果需要给激活的面板加一些视觉效果，比如背景色或者边框，可以写这样的CSS：

.ui-tabs-panel.active {
  background-color: #f8f9fa;
  border-left: 3px solid #2196F3;
  padding: 15px;
}

这样不管是页面刚加载还是切换标签，当前激活的内容div都会带上active样式啦！

内容的提问来源于stack exchange，提问作者siaeva