4

I have implemented the demo js of MDC tabs found here and it's working fine. How would I go about converting this to be more re-usable so I could just use a generic selector like ".js-tabs", link them with tabs id="tab1" then the panels with for="tab1" and include that one piece of js in my main js file.

This is just a prototype so don't have to worry about writing production ready code.

Pen

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

MDC Links

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

And my 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

2

尝试将您的代码包装在函数调用中并使用针对所需选择器的参数进行初始化。此示例要求选项卡 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>
于 2017-06-15T01:35:20.173 回答
0

如果使用最新版本的 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');
于 2020-01-02T16:54:55.467 回答