点击对应按钮后Section无法显示的前端问题求助

核心问题分析 #

JavaScript层面 #

1. 重复绑定事件监听器：allSections.addEventListener('click')被放在AtATime函数内部，每次点击按钮都会新增一个点击事件监听器，导致后续点击触发多次逻辑，状态混乱。
2. 错误的按钮选择器：sectBtns是.controls容器元素，而非单个按钮，遍历它移除active类完全无效，应该遍历sectBtn（所有.control按钮）。
3. 冗余且混乱的状态重置：函数内重复对按钮元素执行classList.remove('active')，但实际需要重置的是section的active状态，按钮的active状态应该和active-btn统一处理。
4. 无效的section选择器：section.${icon_id}#${icon_id}写法冗余，直接通过id选择#${icon_id}更准确高效。

CSS层面 #

1. 样式优先级冲突：.sec1到.sec5的display: none与.active的display: block权重相同，若.active样式写在前面，则无法覆盖display: none；同时.section的transform属性在非active状态需要保持隐藏，active状态需重置。
2. 背景色样式未生效：.section的背景色会覆盖.secX的背景色，需要调整样式优先级，确保active状态下对应section的背景色显示。

修复后的完整代码 #

JavaScript（utilities.js） #

const sections = document.querySelectorAll('.section');
const sectBtns = document.querySelectorAll('.control'); 
const allSections = document.querySelector('.main-content');

// 仅绑定一次点击事件，避免重复触发
allSections.addEventListener('click', (instance) => {
  // 确保点击目标是按钮或按钮内部元素
  const targetBtn = instance.target.closest('.control');
  if (!targetBtn) return;

  const icon_id = targetBtn.dataset.id;
  if (!icon_id) return;

  // 重置所有按钮的激活状态
  sectBtns.forEach(btn => {
    btn.classList.remove('active', 'active-btn');
  });
  // 激活当前点击的按钮
  targetBtn.classList.add('active', 'active-btn');

  // 重置所有section的显示状态
  sections.forEach(section => {
    section.classList.remove('active');
  });
  // 显示对应section
  const targetSection = document.getElementById(icon_id);
  if (targetSection) {
    targetSection.classList.add('active');
  }
});

CSS（look/look.css） #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

:root {
  --color-primary: #191d2b;
  --color-secondary: #27AE60;
  --color-white: #FFFFFF;
  --color-black: #000;
  --color-grey0: #f8f8f8;
  --color-grey-1: #dbe1e8;
  --color-grey-2: #b2becd;
  --color-grey-3: #6c7983;
  --color-grey-4: #454e56;
  --color-grey-5: #2a2e35;
  --color-grey-6: #12181b;
  --br-sm-2: 14px;
  --box-shadow-1: 0 3px 15px rgba(0, 0, 0, .3);
}

body {
  background-color: var(--color-primary);
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  color: var(--color-white);
  transition: all 0.4s ease-in-out;
}

a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
}

header {
  min-height: 100vh;
  color: var(--color-white);
  overflow: hidden;
}

section {
  min-height: 100vh;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 3rem 18rem;
}

.section {
  transform: translateY(-100%) scale(0);
  transition: all 0.4s ease-in-out;
  background-color: var(--color-primary);
  display: none; /* 统一设置初始隐藏 */
}

/* 各section的背景色 */
.section.sec1 {
  background-color: white;
}

.section.sec2 {
  background-color: blue;
}

.section.sec3 {
  background-color: gold;
}

.section.sec4 {
  background-color: pink;
}

.section.sec5 {
  background-color: red;
}

/* active状态：显示并重置transform */
.section.active {
  display: block;
  transform: translateY(0) scale(1);
}

/* Controls */
.controls {
  position: fixed;
  z-index: 10;
  top: 50%;
  right: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}

.controls .active-btn {
  background-color: var(--color-secondary);
  transition: all 0.4s ease-in-out;
}

.controls .active-btn i {
  color: var(--color-white);
}

.controls .control {
  padding: 1rem;
  cursor: pointer;
  background-color: var(--color-grey-4);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
  box-shadow: var(--box-shadow-1);
}

.controls .control i {
  font-size: 1.2rem;
  color: var(--color-grey-2);
  pointer-events: none;
}

HTML #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="look/look.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Poppins:wght@300;400;500;600;700;800&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <title>Portfolio</title>
</head>

<body class="main-content">
  <header class="section sec1 header active" id="home">
  </header>
  <main>
    <section class="section sec2 about" id="about"></section>
    <section class="section sec3 portfolio" id="portfolio"></section>
    <section class="section sec4 blogs" id="blogs"></section>
    <section class="section sec5 contact" id="contact"></section>
  </main>
  <div class="controls">
    <div class="control control-1 active-btn home-icon" data-id="home">
      <i class="fas fa-home"></i>
    </div>
    <div class="control control-2 about-icon" data-id="about">
      <i class="fas fa-user"></i>
    </div>
    <div class="control control-3 portfolio-icon" data-id="portfolio">
      <i class="fas fa-briefcase"></i>
    </div>
    <div class="control control-4 blogs-icon" data-id="blogs">
      <i class="fas fa-newspaper"></i>
    </div>
    <div class="control control-5 contact-icon" data-id="contact">
      <i class="fas fa-envelope-open"></i>
    </div>
  </div>
  <script src="/utilities.js"></script>
</body>

</html>

修复说明 #

1. JavaScript：移除冗余的AtATime函数，将点击事件监听器移到全局仅绑定一次；通过closest('.control')确保点击目标为按钮元素；统一处理按钮和section的状态重置与激活逻辑。
2. CSS：统一设置.section初始隐藏样式；调整背景色样式优先级，确保active状态下对应颜色生效；.section.active同时控制显示状态和transform动画。
3. HTML：移除按钮上的onclick属性，改用事件委托统一处理点击逻辑，避免冗余代码。

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