物化活动选项卡在模态中不起作用答案

【问题标题】：Materialize active tab not working in Modal物化活动选项卡在模态中不起作用
【发布时间】：2016-07-31 13:37:41
【问题描述】：

即使我为其中一个选项卡指定了class 或active，但在模态中，活动选项卡不会显示下划线。但是，一旦我单击其中一个选项卡，它就会开始工作。有什么问题？

这里是我给元素正确的 class 名称的地方：

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

任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

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

类似这样的：

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

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

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

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

【讨论】：

【解决方案2】：

看不到下划线的原因是没有下划线。
您看到的行是一个带有indicator 类的div，它以编程方式移动到选择的选项卡。

在我看来，您可以用自己的 CSS 覆盖指示器：

.tabs .indicator { display: none; }
.tabs .tab a.active { border-bottom: 2px solid #f6b2b5; }

这里的问题是你丢失了动画。

您也可以手动设置指标的位置：

 $('#modal1').find('.indicator').attr('style', 'right: 415.333px; left: 0px;');

这个问题是有点脏。

【讨论】：