html实现TAB选项卡切换

<!DOCTYPE html>  
<html>  
<head>  <title>选项卡示例</title>  <style>  .tabs {  overflow: hidden; /* 防止选项卡溢出容器 */  border: 1px solid #ccc;  background-color: #f1f1f1;  }  .tab-links {  margin: 0;  padding: 0;  list-style: none;  }  .tablink {  background-color: inherit; /* 继承.tabs的背景色 */  float: left; /* 使选项卡并排显示 */  border: none;  outline: none;  cursor: pointer;  padding: 14px 16px;  transition: background-color 0.3s; /* 平滑过渡效果 */  width: 50%; /* 两个选项卡各占50%宽度 */  text-align: center; /* 文本居中 */  }  .tablink:hover {  background-color: #ddd; /* 鼠标悬停时变色 */  }  .tablink.active {  background-color: #4CAF50; /* 选中时变色为蓝色（这里改为绿色以示例，因为纯蓝色可能不易读） */  color: white; /* 文本颜色变为白色 */  }  .tabcontent {  display: none;  padding: 20px;  border: 1px solid #ccc;  border-top: none;  }  .tabcontent.active {  display: block;  }  </style>  
</head>  
<body>  <div class="tabs">  <ul class="tab-links">  <li><button class="tablink active" onclick="openTab(event, 'Tab1')">Tab 1</button></li>  <li><button class="tablink" onclick="openTab(event, 'Tab2')">Tab 2</button></li>  </ul>  <div id="Tab1" class="tabcontent active">  <h3>Tab 1 内容</h3>  <p>这是Tab 1的文本内容。</p>  </div>  <div id="Tab2" class="tabcontent">  <h3>Tab 2 内容</h3>  <p>这是Tab 2的文本内容。</p>  </div>  
</div>  <script>  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("tablink");  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";  }  
</script>  </body>  
</html>