Question

我已经实现了这里找到的MDC标签的演示js，它运行正常。我将如何将其转换为更可重复使用，以便我可以使用像“.js-tabs”这样的通用选择器，将它们链接起来 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>

Answer 1

尝试在函数调用中包装代码，并使用针对所需选择器的参数启动。此示例要求选项卡ID与面板的“for”属性匹配。要重用，只需使用不同的id调用initTab函数。希望这会有所帮助。

function initTabs(el) {

    var tabs = new mdc.tabs.MDCTabBar(document.querySelector('#' + el));
    var panels = document.querySelector("[for=" + el + "]");

    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);
    });
}


initTabs('tab1');
initTabs('tab2');

HTML

<nav id="tab1" class="mdc-tab-bar mdc-tab-bar--indicator-accent  js-tabs" role="tablist"> ... </nav>
<div class="js-panels" for='tab1'> ... </div>

<nav id="tab2" class="mdc-tab-bar mdc-tab-bar--indicator-accent  js-tabs" role="tablist"> ... </nav>
<div class="js-panels" for='tab2'> ... </div>

Answer 2

如果使用最新版本的MDC，请尝试此操作。

function initTabs(el) {
    var tabBar = new mdc.tabBar.MDCTabBar(document.querySelector('#' + el));
    var panels = document.querySelector("[for=" + el + "]");
    tabBar.preventDefaultOnClick = true;
    function updatePanel(index) {
        var activePanel = panels.querySelector(".mdc-tab-content.mdc-tab-content--active");
        if (activePanel) {
            activePanel.classList.remove("mdc-tab-content--active");
        }
        var newActivePanel = panels.querySelector(
            ".mdc-tab-content:nth-child(" + (index + 1) + ")"
        );
        if (newActivePanel) {
            newActivePanel.classList.add("mdc-tab-content--active");
        }
    }
    tabBar.listen("MDCTabBar:activated", function(t) {
        var tabs = t.detail;
        var nthChildIndex = tabs.index;
        updatePanel(nthChildIndex);
    });
}
initTabs('tab1');

MDC以可重用的方式选择Javascript

2 个答案: