Materialize an active tab that does not work in Modal

Question

The active tab does not display underscore when in the module, although I gave one of the tabs a classof active. However, as soon as I click on one of the tabs, it starts to work. What is the problem?

Here is the JSFiddle .

And here is the place where I give the element the correct name class:

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

Any help would be appreciated.

Answer 1

An underline will be displayed if you initialize the tabs using readythe Modal window option .

Something like that:

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

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

, click :

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

: https://jsfiddle.net/qj0r84dr/

, .

Answer 2

, , - .
, , div indicator, , .

, CSS:

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

, .

:

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

, .

​​ ( ).