使活动选项卡在模式下不起作用

The active tab doesn't show an underline when in a Modal even though I have given one of the tabs a class of active. However, once I click on one of the tabs it starts working. What is the issue?

活动选项卡在模式中不显示下划线，即使我给其中一个选项卡一个活动类。然而，一旦我点击其中一个选项卡，它就开始工作了。这个问题是什么?

Here is a JSFiddle.

这是一个JSFiddle。

And here is the spot where I'm giving the element the proper class name:

这里我给元素一个合适的类名:

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

Any help would be appreciated.

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

2 个解决方案

#1

The underline will show if you initialize the tabs using the ready option of the Modal window.

下划线将显示您是否使用模式窗口的ready选项来初始化选项卡。

Something like this:

是这样的:

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

Here is a fiddle: https://jsfiddle.net/powxw392/

这里有一个小提琴:https://jsfiddle.net/powxw392/

If you want a bit of an animation when you pop the modal window, place the tabs initialization outside of the modal function and add a click event like so:

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

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

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

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

Both options will allow you to retain the animation of the underline moving from tab to tab.

这两个选项都允许您保留下划线从一个选项卡移动到另一个选项卡的动画。

#2

The reason you don't see the underline is because there is no underline.
The line you are seeing is a div with a class of indicator which moves programatically to which ever tab is selected.

你看不到下划线的原因是因为没有下划线。您正在看到的行是一个div，其中包含一个指示器类，它按程序移动到所选择的ever选项卡。

The way I see it, you can either override the indicator with your own CSS:

在我看来，你可以用你自己的CSS覆盖这个指示器:

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

The problem here is that you lose the animation.

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

You can also set the indicator's position manually:

您还可以手动设置指示器的位置:

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

The problem with this one is that it's a little dirty.

这个的问题是它有点脏。

Updated fiddle (with the second choice).

更新小提琴(与第二选择)。

#1