javascript - 在 div 之间切换时更改按钮类

Question

我今天刚开始学习 javascript，我正在尝试制作一个可以在 div 之间切换的菜单。

我的问题是在 div 之间切换时我不知道如何更改按钮类。

例如，如果单击按钮 2，该类将从 btn-purple 更改为 btn-blue，并且按钮 1 类将从 btn-blue 更改为 btn-purple，并且还会在 div 之间切换。

window.toggle = (id, btn) => {
  const button = document.getElementById(btn);

  document.querySelectorAll('.menus').forEach(menu => {
    if (menu.style.display === 'block') {
      menu.style.display = 'none';
    }
  });

  changeClass(button, 'btn-purple', 'btn-blue');
  document.getElementById(id).style.display = "block";
};

window.changeClass = (e, r, a) => {
  e.classList.remove(r);
  e.classList.add(a);
};

.btn-blue {
  background-color: #1d8dee;
}

.btn-blue:hover {
  background-color: #4fa7ee;
}

.btn-purple {
  background-color: #8064A2;
}

.btn-purple:hover {
  background-color: #7237e4;
}

.menus {
  text-align: center;
  display: none;
}

<div style="text-align: center; overflow: auto; white-space: nowrap;">
  <button class="btn btn-blue" id="btn1" onclick="toggle('menu1', 'btn1');">Button One</button> &nbsp;
  <button class="btn btn-purple" id="btn2" onclick="toggle('menu2', 'btn2');">Button Two</button>
</div>

<div id="menu1" class="menus" style="display: block;"><br>
  <p>Menu One</p>
</div>

<div id="menu2" class="menus"><br>
  <p>Menu Two</p>
</div>

我希望也许有人可以帮助我找出原因或为我指明正确的方向，或者是否有更简单/更好的方法来实现我的目标。

编辑：我忘了提到我有两个以上的 div 和按钮，我只是展示了两个作为示例

标签： javascripthtmlcss

Answer 1

1. 如果您将按钮 CSS 初始化为您想要的第一种颜色，并包含一个hidden类，classList会更有效，并且您不必再设置style元素的 。

2. 我在按钮和菜单上使用了数据属性。

// Cache the buttons and menu elements
const buttons = document.querySelectorAll('button');
const menus = document.querySelectorAll('.menu');

// Attach listeners to the buttons
buttons.forEach(button => {
  button.addEventListener('click', handleButton, false);
});

function handleButton(e) {
  
  // Grab the data attribute id from the button
  const button = e.target;
  const { id } = button.dataset;

  // Hide the menus
  menus.forEach(menu => {
    menu.classList.add('hidden');
  });

  // Target the menu with the corresponding button id
  const menu = document.querySelector(`.menu[data-id="${id}"]`);

  // Show the menu
  menu.classList.toggle('hidden');

  // Remove the btn-purple class from all the buttons
  buttons.forEach(button => {
    button.classList.remove('btn-purple');
  });

  // But add the class to the button that was clicked on
  button.classList.add('btn-purple');

};

.btn { background-color: #1d8dee; }
.btn:hover { background-color: #4fa7ee; }
.btn-purple { background-color: #8064A2; }
.btn-purple:hover { background-color: #7237e4; }
.menu { text-align: center; }
.hidden { display: none; }

<div>
  <button class="btn" data-id="1">Button One</button>
  &nbsp;
  <button class="btn btn-purple" data-id="2">Button Two</button>
  &nbsp;
  <button class="btn btn-purple" data-id="3">Button Three</button>
</div>

<div data-id="1" class="menu"><br>
  <p>Menu One</p>
</div>

<div data-id="2" class="menu hidden"><br>
  <p>Menu Two</p>
</div>

<div data-id="3" class="menu hidden"><br>
  <p>Menu Three</p>
</div>