html - Materialise 事件选项卡在 Modal 中不起作用

Question

即使我已经为其中一个选项卡指定了 active 的 class，但在 Modal 中事件选项卡不显示下划线。但是，一旦我单击其中一个选项卡，它就会开始工作。什么问题？

这是一个JSFiddle .

这是我为元素赋予正确的 class 名称的地方:

...
<a class="active" href="#test1">Test 1</a>
...

如有任何帮助，我们将不胜感激。

Answer 1

如果您使用模态窗口的 ready 选项初始化选项卡，则会显示下划线。

像这样:

$('.modal-trigger').leanModal({
    ready: function () {
        $('ul.tabs').tabs();
    }
});

这是一个 fiddle :https://jsfiddle.net/powxw392/

如果你想在弹出模态窗口时有一点动画，将选项卡初始化放在模态函数之外并添加一个点击事件，如下所示:

$('ul.tabs').tabs();
$('.modal-trigger').leanModal({
    ready: function () {
        $('#firstTab').click();
    }
});

fiddle :https://jsfiddle.net/qj0r84dr/

这两个选项都允许您保留在选项卡之间移动的下划线动画。