实现活动选项卡不在Modal中工作

Question

即使我已将其中一个标签class active给出，但有效标签在模态下也不会显示下划线。但是，一旦我点击其中一个标签，它就会开始工作。有什么问题？

这是JSFiddle。

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

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

任何帮助都将不胜感激。

Answer 1

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

这样的事情：

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

这是一个小提琴：https://jsfiddle.net/powxw392/

如果在弹出模态窗口时需要一些动画，请将标签初始化置于模态函数之外，并添加一个单击事件，如下所示：

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

小提琴：https://jsfiddle.net/qj0r84dr/

这两个选项都允许您保留从标签到标签的下划线动画。

Answer 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;');

这个问题是它有点脏。

Updated fiddle (with the second choice).