4

ここにある MDC タブのデモ js を実装しましたが、正常に動作しています。これをより再利用できるように変換するにはどうすればよいので、「.js-tabs」のような汎用セレクターを使用し、それらをタブ id="tab1" にリンクしてから、パネルを for="tab1" にリンクし、それを含めることができます。私のメインのjsファイルにあるjsの一部。

これは単なるプロトタイプであるため、本番環境に対応したコードを書くことについて心配する必要はありません。

ペン

https://codepen.io/rhysyg03/pen/OgRygJ

MDC リンク

https://material-components-web.appspot.com/tabs.html

https://github.com/material-components/material-components-web/blob/master/demos/tabs.html

var tabs = new mdc.tabs.MDCTabBar(document.querySelector('#tab1'));
var panels = document.querySelector('.js-panels');
tabs.preventDefaultOnClick = true;
function updatePanel(index) {
    var activePanel = panels.querySelector('.js-panel.is-active');
    if (activePanel) {
        activePanel.classList.remove('is-active');
    }
    var newActivePanel = panels.querySelector('.js-panel:nth-child(' + (index + 1) + ')');
    if (newActivePanel) {
        newActivePanel.classList.add('is-active');
    }
}
tabs.listen('MDCTabBar:change', function (t) {
    var tabs = t.detail;
    var nthChildIndex = tabs.activeTabIndex;
    updatePanel(nthChildIndex);
});

そして私のHTML

<div class="mdc-toolbar">
    <div class="mdc-toolbar__row">
        <div class="mdc-toolbar__section mdc-toolbar__section--align-start">
            <nav id="tab1" class="mdc-tab-bar mdc-tab-bar--indicator-accent  js-tabs" role="tablist">
                <a role="tab" aria-controls="panel-1"
                class="mdc-tab mdc-tab--active">Item One</a>
                <a role="tab" aria-controls="panel-2"
                class="mdc-tab">Item Two</a>
                <a role="tab" aria-controls="panel-3"
                class="mdc-tab">Item Three</a>
                <span class="mdc-tab-bar__indicator"></span>
            </nav>
        </div>
    </div>
</div>
<section>
    <div class="js-panels" for='tab1'>
        <p class="js-panel is-active" role="tabpanel" aria-hidden="false">Item One</p>
        <p class="js-panel" role="tabpanel" aria-hidden="true">Item Two</p>
        <p class="js-panel" role="tabpanel" aria-hidden="true">Item Three</p>
    </div>
</section>
4

2 に答える 2