如何使用CSS设置角度材质选项卡的样式？

<div id="tabs">
  <ul>
    <li class="tab" id="tab1">Tab 1</li>
    <li class="tab" id="tab2">Tab 2</li>
    <li class="tab" id="tab3">Tab 3</li>
  </ul>
  <div class="tab-content" id="content1">
    Content for Tab 1
  </div>
  <div class="tab-content" id="content2">
    Content for Tab 2
  </div>
  <div class="tab-content" id="content3">
    Content for Tab 3
  </div>
</div>

#tabs ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#tabs .tab {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

#tabs .tab:hover {
  background-color: #aaa;
}

#tabs .tab-content {
  display: none;
  padding: 10px;
  background-color: #f9f9f9;
}

#tabs .tab-content.show {
  display: block;
}

var tabs = document.getElementsByClassName('tab');
var contents = document.getElementsByClassName('tab-content');

for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', function() {
    var tabId = this.id;
    var contentId = tabId.replace('tab', 'content');
    
    for (var j = 0; j < contents.length; j++) {
      contents[j].classList.remove('show');
    }
    
    document.getElementById(contentId).classList.add('show');
  });
}