Материализовать активную вкладку, не действующую в 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

Причина, по которой вы не видите подчеркивание, заключается в отсутствии подчеркивания.
Линия, которую вы видите, представляет собой 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;'); 

Проблема с этим в том, что это немного грязный.

Updated fiddle (with the second choice).