MDCタブ再利用可能な方法でのJavaScript

Question

ここにあるMDCタブのデモjsを実装しました。うまくいきました。これをより再利用できるように変換するにはどうすればいいですか？ ".js-tabs"のような一般的なセレクタを使って、 タブid = "tab1"、次に "tab1"それは私のメインのjsファイルのjsの1つです。

これは単なるプロトタイプなので、準備ができたコードを書くことについて心配する必要はありません。

ペン

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

関数呼び出しでコードをラップし、必要なセレクターを対象とするパラメーターで開始しようとしています。この例では、パネルの 'for'属性と一致するタブIDが必要です。再利用するには、initTab関数を別のIDで呼び出すだけです。お役に立てれば。

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>