u-tabs 举一个内容切换实例

假设我们有一个网站，其中包含多个标签页，每个标签页都包含不同类型的内容。我们可以使用u-tabs来实现标签页之间的内容切换。

HTML结构如下：

<div class="u-tabs">
  <div class="u-tabs-nav">
    <button class="u-tabs-button" data-tab="tab1">Tab 1</button>
    <button class="u-tabs-button" data-tab="tab2">Tab 2</button>
    <button class="u-tabs-button" data-tab="tab3">Tab 3</button>
  </div>
  <div class="u-tabs-content">
    <div class="u-tabs-panel" data-tab="tab1">
      <h2>Tab 1 Content</h2>
      <p>This is the content for Tab 1</p>
    </div>
    <div class="u-tabs-panel" data-tab="tab2">
      <h2>Tab 2 Content</h2>
      <p>This is the content for Tab 2</p>
    </div>
    <div class="u-tabs-panel" data-tab="tab3">
      <h2>Tab 3 Content</h2>
      <<p>This is the content for Tab 3</p>
    </div>
  </div>
</div>

CSS样式如下：

.u-tabs .u-tabs-nav {
  display: flex;
}

.u-tabs .u-tabs-button {
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #eee;
  border: none;
  cursor: pointer;
}

.u-tabs .u-tabs-button.active {
  background-color: #ccc;
}

.u-tabs .u-tabs-content .u-tabs-panel {
  display: none;
}

.u-tabs .u-tabs-content .u-tabs-panel.active {
  display: block;
}

JS代码如下：

var tabs = document.querySelectorAll('.u-tabs-button');
var panels = document.querySelectorAll('.u-tabs-panel');

function showPanel(panelIndex, colorCode) {
  tabs.forEach(function(tab) {
    tab.classList.remove('active');
  });
  tabs[panelIndex].classList.add('active');

  panels.forEach(function(panel) {
    panel.classList.remove('active');
  });
  panels[panelIndex].classList.add('active');
}

showPanel(0, '#ccc');

tabs.forEach(function(tab, index) {
  tab.addEventListener('click', function() {
    showPanel(index, '#ccc');
  });
});

上面的代码将在页面加载时显示第一个标签页的内容。当用户单击标签按钮时，将显示相应的标签页内容。此外，我们还使用CSS样式来显示当前激活的标签按钮和标签页内容。