console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tab Navigation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="tabs">
    <div class="tab" data-status="completed">申报信息</div>
    <div class="tab" data-status="completed">基本情况</div>
    <div class="tab" data-status="in-progress">育人工作情况</div>
    <div class="tab" data-status="completed">教学工作情况</div>
    <div class="tab active">专业实践情况</div>
  </div>
  <script src="scripts.js"></script>
  <style>
      body {
  font-family: Arial, sans-serif;
}

.tabs {
  display: flex;
  border-bottom: 2px solid #ddd;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
}

.tab::before {
  content: ' ';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
}

.tab[data-status="completed"]::before {
  background-color: green;
}

.tab[data-status="in-progress"]::before {
  background-color: orange;
}

.tab.active {
  background-color: #007bff;
  color: white;
  border-radius: 5px 5px 0 0;
}

.tab.active::before {
  background-color: white;
}

  </style>
  <script>
      document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    tab.classList.add('active');
  });
});
  </script>
</body>
</html>