1. 首页
  2. 问题
  3. 使用 JavaScript 删除 html 中的类
一尘不染

使用 JavaScript 删除 html 中的类

javascript

我正在使用 html sass 和 javascript 在反应式投资组合网站上工作，在 javascript 中，当您单击按钮时，它应该向按钮（控件）添加一个活动类，然后在您删除该类并将其添加到另一个按钮时单击其他按钮，但是我的仅添加活动类并删除它

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

     allSections.addEventListener('click', (e) =>{
        const id = e.target.dataset.id;
        if(id){
            //remove selected id
            sectBtns.forEach((btn) => {
                btn.classList.remove('active');
            })
            e.target.classList.add('active');

            // hides other sections
            sections.forEach((section) => {
                section.classList.remove('active');
            })

            const element = document.getElementById(id);
            element.classList.add('active');
        }
    })
}
<!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">
    <title>portfolio</title>
    <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=Poppins:wght@300&family=Quicksand:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</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 blog" id="blogs"></section>
        <section class="section sec5 contact" id="contact"></section>
    </main>

    <div class="controlls">
        <div class="control control-1 active-btn" data-id="home">
            <i class="fa-solid fa-house"></i>
        </div>
        <div class="control control-2 " data-id="about">
            <i class="fa-solid fa-id-badge"></i>
        </div>
        <div class="control control-3 " data-id="portfolio">
            <i class="fa-solid fa-briefcase"></i>
        </div>
        <div class="control control-4 " data-id="blogs">
            <i class="fa-solid fa-newspaper"></i>
        </div>
        <div class="control control-5 " data-id="contact">
            <i class="fa-solid fa-address-card"></i>
        </div>
    </div>

    <script src="/reactiveportfolio/html/app,js"></script>
</body>
</html>

阅读 95

收藏
2022-07-27

共1个答案

一尘不染

看来您的问题是一个小错字：

sectBtns.forEach((btn) => {

应该

sectBtn.forEach((btn) => {

注意sectBtn与sectBtns

示例代码

.active {
  border: solid blue 3px;
}

.control {
  background: grey;
  margin: 5px;
  padding: 5px;
  width: 30px;
  text-align: center;
}
<!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">
  <title>portfolio</title>
  <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=Poppins:wght@300&family=Quicksand:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</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 blog" id="blogs"></section>
    <section class="section sec5 contact" id="contact"></section>
  </main>

  <div class="controlls">
    <div class="control control-1 active-btn" data-id="home">
      <i class="fa-solid fa-house"></i>
    </div>
    <div class="control control-2 " data-id="about">
      <i class="fa-solid fa-id-badge"></i>
    </div>
    <div class="control control-3 " data-id="portfolio">
      <i class="fa-solid fa-briefcase"></i>
    </div>
    <div class="control control-4 " data-id="blogs">
      <i class="fa-solid fa-newspaper"></i>
    </div>
    <div class="control control-5 " data-id="contact">
      <i class="fa-solid fa-address-card"></i>
    </div>
  </div>


</body>
<script>
  const sections = document.querySelectorAll('.section');
  const sectBtns = document.querySelectorAll('.controlls');
  const sectBtn = document.querySelectorAll('.control');
  const allSections = document.querySelector('.main-content');

  allSections.addEventListener('click', (e) => {
    const id = e.target.dataset.id;
    if (id) {
      //remove selected id
      sectBtn.forEach((btn) => {
        if (btn.classList.contains('active')) {
          btn.classList.remove('active');
        }
        e.target.classList.add('active');
      });

      // hides other sections
      sections.forEach((section) => {
        section.classList.remove('active');
      })

      const element = document.getElementById(id);
      element.classList.add('active');
    }
  })
</script>

</html>
2022-07-27