物化活動選項卡在Modal中不起作用

Question

活動選項卡在模態中時不顯示下劃線，即使我給出了其中一個選項卡class的active。但是，一旦我點擊其中一個標籤開始工作。什麼是問題？

這是JSFiddle。

而且這裏是我給的元素的正確class名稱現貨：

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

任何幫助，將不勝感激。

Answer 1

下劃線將顯示。

事情是這樣的：

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

這裏是一個小提琴：https://jsfiddle.net/powxw392/

如果你想有點動畫的時候你彈出模態窗口中，將標籤初始化模式功能之外，添加一個click事件，像這樣：

$('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;'); 

與這一個問題是，這是一個有點髒。如果您使用初始化模態窗口的ready選項標籤

Updated fiddle (with the second choice).