Question

我目前正在我的网站上工作（pastebin，以防万一我忘记删除自己的电子邮件，不用担心；这是我的公开地址）。当我从导航栏中的任何按钮调用函数showTab()来更改活动选项卡的背景时，它都可以正常工作。但是，当我尝试在页面加载时为我的“主页”选项卡调用函数时，如下所示：
showTab(0)
或这样：
document.addEventListener('DOMContentLoaded', function() { showTab(0) }, false);
这是行不通的。我首先必须单击“主页”按钮（或其他任何按钮），该功能才能起作用（for (let i = 0; i < tabButtons.length; i++) {tabButtons[i].addEventListener('click', function() { showTab(i) }, false)}）。

我也尝试过在不同的位置调用该函数，以确保到目前为止没有任何作用。

这是我的功能：

function showTab(panelIndex) {
  {
    tabButtons.forEach (function(node) {
      node.style.backgroundColor = ''
      node.style.color = ''
    })
    tabButtons[panelIndex].style.backgroundColor = 'rgb(66, 66, 66)'
    tabButtons[panelIndex].style.color = '#ffffff'
  }
}

var tabButtons = document.querySelectorAll('.tabContainer .buttonContainer button')
我的HTML看起来像这样：

<div class="tabContainer">
  <div class="buttonContainer">
    <button>Home</button>
    <button>Projects</button>
    <button>Contact</button>
    <button>Bio</button>
  </div>
</div>

Answer 1

更好的方法是将样式应用于“活动”类，然后将该类应用于所单击的按钮。这样会更好，因为它将样式和功能划分到各自的区域（css和js），从而提供了更简洁的代码结构。

请注意，活动类被附加到主页按钮上-可以在其他页面上进行更改，以便每个页面都有自己的按钮设置为活动按钮。

此外-这似乎是其导航结构-因此应该是IMO ul元素内的<nav>。

document.querySelector('.buttonContainer').addEventListener('click', function(event) {
  var el = event.target;
  
  if(el.getAttribute('type') == 'button'){
    var id = el.getAttribute('id');
    setActiveButton(id)
   }
   
});


function setActiveButton(id) {
  document.querySelectorAll('.buttonContainer button').forEach(function(button) {
    button.classList.remove('active');
  })
  document.querySelector('#' + id).classList.add('active');
}

button {
  background: #ffffff;
  color: rgb(66,66,66);
}

button.active {
  background: rgb(66,66,66);
  color: #fff;
}

<div class="tabContainer">
  <div class="buttonContainer">
    <button id="home-button" type="button" class="active">Home</button>
    <button id="projects-button" type="button">Projects</button>
    <button id="contact-button" type="button">Contact</button>
    <button id="bio-button" type="button">Bio</button>
  </div>
</div>

Answer 2

具有事件委托的“相同”解决方案。

window.onload = _=>{
  const tabButtons = document.querySelectorAll('.tabContainer .buttonContainer button');

  document.querySelector('.tabContainer .buttonContainer').onclick = e=>{
    if (!e.target.matches('button')) return;
    e.stopPropagation();
    tabButtons.forEach(bt=>{bt.classList.remove('active')})
    e.target.classList.add('active')
  }
}

button {
  background: none;
  color:transparent;
}
button.active {
  background: #424242;
  color: #fff;
}

<div class="tabContainer">
  <div class="buttonContainer">
    <button class="active">Home</button>
    <button>Projects</button>
    <button>Contact</button>
    <button>Bio</button>
  </div>
</div>

为什么此JS函数在加载时不起作用？

2 个答案: