如何使 jQuery UI 选项卡在激活选项卡时执行“显示：flex”而不是“显示：阻止”？

Posted 2023-03-14

【中文标题】如何使 jQuery UI 选项卡在激活选项卡时执行“显示：flex”而不是“显示：阻止”？

【英文标题】：How to make jQuery UI Tabs do 'display: flex' instead of 'display: block' on activating a tab?

【发布时间】：2016-10-19 11:27:08

【问题描述】：

我的 jQuery UI 选项卡有一个（可能相当简单）问题。

在打开其中一个选项卡时，面板会获得一个 'style="display: block;'添加到其 div 中，使面板可见。

激活标签后的 html：

<div id="xxx" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-2" role="tabpanel" style="display: block;" aria-hidden="false">

为了使位于内部的菜单看起来正确，我想使用 flex 来定位菜单项。不幸的是，我在 CSS 中设置它的所有尝试都被脚本及其“显示：块”覆盖。 .

如何使 jQuery UI 选项卡在打开选项卡时添加“显示：flex”而不是“显示：块”？

我尝试使用 jQuery UI 提供的事件进行试验，但到目前为止还没有成功。

任何帮助将不胜感激！谢谢

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好是在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example

【参考方案1】：

这是你的答案；

$("#tabs").tabs(
    activate: function( event, ui ) 
        ui.newPanel.css("display","flex");
    
);

【讨论】：

这正是我一直在寻找的，非常感谢，祝您有个愉快的夜晚！