html 为什么按钮不允许我切换各个部分？

xmq68pz9 于 2023-05-27 发布在其他

关注(0)|答案(2)|浏览(132)

我正在使用HTML、CSS和JavaScript构建一个投资组合网站。我遇到了一个错误：

未捕获的类型错误allSections.addEventListener不是函数。*

我试图使用按钮在网站的各个部分之间切换，但它们被第一部分卡住了，按钮点击不会将它们带到下一部分。

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

function PageTransitions() {
  //buttonclickactiveclass
  for (let i = 0; i < sectBtn.length; i++) {
    sectBtn[i].addEventListener('click', function() {
      let currentBtn = document.querySelectorAll('.active-btn');
      currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
      this.className += 'active-btn';
    })
  }
  //sections active class
  allSections.addEventListener('click', (e) => {
    const id = e.target.dataset.id;
    if (id) {
      //remove selected from the other btns
      sectBtns.forEach((btn) => {
        btn.classList.remove('active')
      })
      e.target.classList.add('active')

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

      const element = document.getElementById(id);
      element.classList.add('active');
    }
  })

}
PageTransitions();

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

<head>
  <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"
  />
</head>

<body class="main-content">
  <header class="section sec1 header active" data-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" data-id="home">
      <i class="fas fa-home"></i>
    </div>
    <div class="control control-2 " data-id="about">
      <i class="fas fa-user"></i>
    </div>
    <div class="control control-3 " data-id="portfolio">
      <i class="fas fa-briefcase"></i>
    </div>
    <div class="control control-4 " data-id="blogs">
      <i class="far fa-newspaper"></i>
    </div>
    <div class="control control-5 " data-id="contact">
      <i class="fas fa-envelope"></i>
    </div>
  </div>

  <script src="app.js"></script>
</body>

</html>

我试图传递一个console.log函数，但它也不起作用。我希望有人能帮助我。

Html

来源：https://stackoverflow.com/questions/76300040/why-doesnt-the-buttons-let-me-toggle-through-the-sections

2条答案

按热度按时间

rnmwe5a21#

您正在使用querySelectorAll（）选择所有部分。它将返回一个NodeList**，其中包含节的列表。因此，您必须循环它们，然后使用addEventListener（）。
有很多错误和额外的代码。我已经根据您的要求更新了代码。试试这个：

const sections = document.querySelectorAll('.section');

function PageTransitions(){
    sections.forEach(section => {
      section.addEventListener('click',(e)=>{
        const target = e.target;
        const id = target.getAttribute('id');
        if(id){
         // Update active for Section
         document.querySelector('.active').classList.remove('active');
         target.classList.add('active')
         // Update active for Control
         document.querySelector('.active-btn').classList.remove('active-btn');
         document.querySelector('div[data-id="' + id + '"]').classList.add('active-btn')
        }
      });
    })
 
}
PageTransitions();

main{
 display: flex;
 justify-content: space-evenly;
}

.active{
background-color: red;
}

.active-btn{
 background-color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <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" />
</head>
<body class="main-content">
    <main>
    <header class="section sec1 header active" id="home">
         Home Logo
    </header>
        <section class="section sec2 about" id="about">About</section>
        <section class="section sec3 portfolio" id="portfolio">Portfolio</section>
        <section class="section sec4 blogs" id="blogs">Blogs</section>
        <section class="section sec5 contact" id="contact">Contact</section>
    </main>

    <div class="controls">
        <div class="control control-1 active-btn" data-id="home">
            <i class="fas fa-home"></i>
        </div>
        <div class="control control-2 " data-id="about">
            <i class="fas fa-user"></i>
        </div>
        <div class="control control-3 " data-id="portfolio">
            <i class="fas fa-briefcase"></i>
        </div>
        <div class="control control-4 " data-id="blogs">
            <i class="far fa-newspaper"></i>
        </div>
        <div class="control control-5 " data-id="contact">
            <i class="fas fa-envelope"></i>
        </div>
    </div>
    
</body>
</html>

我使用了一些CSS行来显示活动部分和控件。希望对大家有帮助。

赞(0）回复(0）举报 2023-05-27

uxhixvfz2#

querySelectorAll不会返回单个元素，而是返回node list。简单地使用console.log(allSection)或console.log(typeof allSection)，看看它返回什么。简单的解决方案是使用forEach迭代将eventListener应用于节点列表中的所有元素：

allSection.forEach(el =>
  el.addEventListener('click', function(e) {
    ...
  })
)

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

function PageTransitions() {
  //buttonclickactiveclass
  for (let i = 0; i < sectBtn.length; i++) {
    sectBtn[i].addEventListener('click', function() {
      let currentBtn = document.querySelectorAll('.active-btn');
      currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
      this.className += 'active-btn';
    })
  }
  //sections active class
  allSections.forEach(el => el.addEventListener('click', (e) => {
    const id = e.target.dataset.id;
    if (id) {
      //remove selected from the other btns
      sectBtns.forEach((btn) => {
        btn.classList.remove('active')
      })
      e.target.classList.add('active')

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

      const element = document.getElementById(id);
      element.classList.add('active');
    }
  }))

}
PageTransitions();

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

<head>
  <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"
  />
</head>

<body class="main-content">
  <header class="section sec1 header active" data-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" data-id="home">
      <i class="fas fa-home"></i>
    </div>
    <div class="control control-2 " data-id="about">
      <i class="fas fa-user"></i>
    </div>
    <div class="control control-3 " data-id="portfolio">
      <i class="fas fa-briefcase"></i>
    </div>
    <div class="control control-4 " data-id="blogs">
      <i class="far fa-newspaper"></i>
    </div>
    <div class="control control-5 " data-id="contact">
      <i class="fas fa-envelope"></i>
    </div>
  </div>

  <script src="app.js"></script>
</body>

</html>

赞(0）回复(0）举报 2023-05-27

我来回答

html 为什么按钮不允许我切换各个部分？

2条答案

相关问题

热门标签

最新问答