如何在Tab内添加Next/Save按钮切换Tab并设置状态颜色

针对你提出的两个需求，下面是修改后的完整代码及实现说明：

完整代码 #

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Tab状态样式 */
.tab button.unopened {
  background-color: #ccc; /* 未打开灰色 */
}
.tab button.active-uncompleted {
  background-color: #ffeb3b; /* 当前未完成黄色 */
}
.tab button.completed {
  background-color: #81c784; /* 已完成绿色 */
}

/* Change background color of buttons on hover */
.tab button:hover {
  opacity: 0.8;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
  position: relative;
}

/* 按钮容器样式 */
.tab-actions {
  position: absolute;
  bottom: 10px;
  right: 12px;
}

.tab-actions button {
  padding: 8px 16px;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Vertical Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks unopened" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks unopened" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks unopened" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
  <div class="tab-actions">
    <button onclick="nextTab('London')">Next</button>
  </div>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
  <div class="tab-actions">
    <button onclick="nextTab('Paris')">Next</button>
  </div>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
  <div class="tab-actions">
    <button onclick="markCompleted('Tokyo')">Finish & Save</button>
  </div>
</div>  

<script>
const tabNames = ['London', 'Paris', 'Tokyo'];
const tabButtons = document.getElementsByClassName('tablinks');

function initTabs() {
  // 初始化默认Tab状态
  const defaultBtn = document.getElementById('defaultOpen');
  defaultBtn.classList.remove('unopened');
  defaultBtn.classList.add('active-uncompleted');
}

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    // 移除所有激活类，保留状态类
    tablinks[i].className = tablinks[i].className.replace(" active-uncompleted", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.classList.add('active-uncompleted');
}

function nextTab(currentCity) {
  const currentIndex = tabNames.indexOf(currentCity);
  // 标记当前Tab为已完成
  tabButtons[currentIndex].classList.remove('active-uncompleted');
  tabButtons[currentIndex].classList.add('completed');
  
  // 切换到下一个Tab
  if (currentIndex < tabNames.length - 1) {
    const nextCity = tabNames[currentIndex + 1];
    // 触发下一个Tab的点击事件
    document.querySelector(`.tablinks[onclick="openCity(event, '${nextCity}')"]`).click();
  }
}

function markCompleted(currentCity) {
  const currentIndex = tabNames.indexOf(currentCity);
  tabButtons[currentIndex].classList.remove('active-uncompleted');
  tabButtons[currentIndex].classList.add('completed');
}

// 初始化Tab状态
initTabs();
// 打开默认Tab
document.getElementById("defaultOpen").click();
</script>
</body>
</html>

功能实现说明 #

1. Next/Save按钮与Tab切换 #

• 在每个.tabcontent底部添加固定定位的按钮容器，放置切换按钮，最后一个Tab改为“Finish & Save”按钮，适配流程收尾场景
• 编写nextTab函数：
  • 获取当前Tab的索引，将其状态更新为“已完成”
  • 计算下一个Tab的索引，触发对应Tab按钮的点击事件完成自动切换
• 最后一个Tab的markCompleted函数仅标记当前Tab为已完成，无切换逻辑

2. Tab状态颜色区分 #

• 在CSS中新增三个状态类：
  • .unopened：未打开的Tab，背景色设为灰色
  • .active-uncompleted：当前激活但未完成的Tab，背景色设为黄色
  • .completed：已完成的Tab，背景色设为绿色
• 页面初始化时给所有Tab添加.unopened类，默认打开的Tab自动切换为.active-uncompleted类
• 点击Next按钮时，自动将当前Tab切换为.completed类，新激活的Tab设为.active-uncompleted类，未操作的Tab保持.unopened类

内容的提问来源于stack exchange，提问作者Rxina