可重用的MDC Tabs Javascript

Question

我已经实现了在这里找到的MDC选项卡的演示js，它工作得很好。我该如何将其转换为更可重用，这样我就可以使用像".js- tabs“这样的通用选择器，用tab1 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>