如何用HTML＋CSS编写灵活的Tab页

要使用HTML和CSS创建一个灵活的Tab页，你可以使用以下的基本结构和样式。这里提供了一个简单的例子，你可以根据需要添加更多的Tab和内容。

HTML:

<div class="tabs">
  <div class="tab" onclick="openTab(event, 'tab1')">Tab 1</div>
  <div class="tab" onclick="openTab(event, 'tab2')">Tab 2</div>
  <div class="tab" onclick="openTab(event, 'tab3')">Tab 3</div>
</div>
 
<div id="tab1" class="tabcontent">
  <h3>Tab 1</h3>
  <p>Content for tab 1...</p>
</div>
 
<div id="tab2" class="tabcontent">
  <h3>Tab 2</h3>
  <p>Content for tab 2...</p>
</div>
 
<div id="tab3" class="tabcontent">
  <h3>Tab 3</h3>
  <p>Content for tab 3...</p>
</div>

CSS:

.tabs {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  padding: 0;
}
 
.tab {
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
}
 
.tabcontent {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
}
 
/* Optionally add a background color to the active tab */
.tab.active {
  background-color: #ccc;
}
 
/* Fade in the active tab content */
.tabcontent.active {
  display: block;
  animation: fadeIn 0.5s;
}
 
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

JavaScript:

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tab");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

这个例子中，每个Tab都有一个onclick事件，调用openTab函数，并传递当前Tab的ID。JavaScript函数会关闭所有的内容区域，并清除所有Tab的激活状态，然后只打开对应ID的内容区域，并激活当前Tab。