如何使用unpkg作为MDC CSS文件和%s文件的存储区在web应用程序上添加材料设计选项卡

<link rel="stylesheet" href="https://unpkg.com/@material/tab-bar/dist/mdc.tab-bar.css">
<script src="https://unpkg.com/@material/tab-bar/dist/mdc.tab-bar.js"></script>

<div class="mdc-tab-bar" role="tablist">
  <div class="mdc-tab-scroller">
    <div class="mdc-tab-scroller__scroll-area">
      <div class="mdc-tab-scroller__scroll-content">
        <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true">
          <span class="mdc-tab__content">
            <span class="mdc-tab__text-label">Tab 1</span>
          </span>
          <span class="mdc-tab-indicator mdc-tab-indicator--active">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
          </span>
          <span class="mdc-tab__ripple"></span>
        </button>
        <button class="mdc-tab" role="tab" aria-selected="false">
          <span class="mdc-tab__content">
            <span class="mdc-tab__text-label">Tab 2</span>
          </span>
          <span class="mdc-tab-indicator">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
          </span>
          <span class="mdc-tab__ripple"></span>
        </button>
        <button class="mdc-tab" role="tab" aria-selected="false">
          <span class="mdc-tab__content">
            <span class="mdc-tab__text-label">Tab 3</span>
          </span>
          <span class="mdc-tab-indicator">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
          </span>
          <span class="mdc-tab__ripple"></span>
        </button>
      </div>
    </div>
  </div>
</div>

const tabBar = new mdc.tabBar.MDCTabBar(document.querySelector('.mdc-tab-bar'));

tabBar.listen('MDCTabBar:activated', function(event) {
  const tabs = document.querySelectorAll('.mdc-tab');
  tabs.forEach(function(tab) {
    tab.classList.remove('mdc-tab--active');
  });
  event.detail.tab.classList.add('mdc-tab--active');
});