Проблемы в переключении вкладок в Materialise 1.0.0 - PullRequest
Новая
       9

Проблемы в переключении вкладок в Materialise 1.0.0

0 голосов
/ 26 декабря 2018

Я хочу выбрать вкладку при нажатии на ссылку.Я пытался использовать различные доступные онлайн решения
(including $('ul.tabs').tabs('select_tab', 'tab_id');)
, но ни одна из них не работает с текущей материализованной версией.

Официальная документация для материализованных состояний для выполнения инициализации с использованием
var instance = M.Tabs.init(el, options); instance.select('tab_id');
, но ни один из методов, похоже, не работает корректно с текущей версией или не был четко определен с помощью вкладок Materialise.

Любая помощь с благодарностью.Ниже приведен фрагмент кода вместе со ссылкой jsfiddle, 

<html>
<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<!--
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
-->


<script>

$(document).ready(function() {
    $('ul.tabs').tabs();
    $("#btnContinue").click(function() {
        $('ul.tabs').tabs('select_tab', 'test2');
    });
});



/* var instance = new M.Tabs.init(el, options);


function check_active(){

    var instance = M.Tabs.getInstance(elem);

    instance.select('test2');

}  */


</script>


</head>

<body>

<div class="col s12">
  <ul class="tabs">
    <li class="tab col s4"><a href="#test1" class="active">tab1</a>
    </li>
    <li class="tab col s4"><a href="#test2">tab2</a>
    </li>
    <li class="tab col s4"><a href="#test4">tab3</a>
    </li>
  </ul>
</div>

<div id='test1' class="col s12">
  <!--<a id="btnContinue" href='#test2' onclick="check_active();">continue</a>-->
  <a id="btnContinue" href='#test2'>continue</a>
</div>
<div id='test2' class="col s12"></div>

</body>

</html>

Ссылка JSFiddle для того же самого: https://jsfiddle.net/chirag_cyber/6evpqcfb/6/

1 Ответ

0 голосов
/ 27 декабря 2018

Вы должны изменить 

$('ul.tabs').tabs('select_tab', 'test2');

на: 

$('ul.tabs').tabs('select', 'test2');

select показывает содержимое вкладки, которая соответствует вкладке с идентификатором. JSFiddle

...