javascript - 如何制作按钮的 "pushed"效果？

Question

我有 3 个按钮，代表 3 个状态。我希望当我按下其中一些按钮时，按钮保持在视觉“按下”状态，而其他 2 个按钮处于正常的非按下状态。

这是我使用的代码:

if (itemType === 'default') {
  document.getElementById("defaultMode").classList.remove('non-pushed');
  document.getElementById("defaultMode").classList.add('pushed');
}

.pushed {
  border-style: inset;
}

.non-pushed {
  border-style: solid;
}

<button id="defaultMode" class="non-pushed" onclick="setMode('link', 'default');">Default</button>
<button id="orthoMode" onclick="setMode('link', 'ortho');">Ortho</button>
<button id="cornerMode" onclick="setMode('link', 'corner');">Corner</button>

但是，它不起作用。

Answer 1

你不需要 JS!

这是一种纯 CSS 方式:

input.toggle {
  position:absolute;
  left:-20em;
}

input.toggle + label {
  border:1px solid black;
  background:lightgrey;
  display:inline-block;
  margin:5px;
  padding:5px;
  border-radius:5px;
  box-shadow:2px 2px 2px grey;
  user-select: none;
}

input.toggle:checked + label {
  background:grey;
  box-shadow:none;
}

input.toggle:focus + label {
  box-shadow:0px 0px 0px 2px dodgerblue;
}

<input type="radio" class="toggle" name="mode" value="default" id="default" checked>
<label for="default">Default</label>

<input type="radio" class="toggle" name="mode" value="ortho" id="ortho">
<label for="ortho">Ortho</label>

<input type="radio" class="toggle" name="mode" value="corner" id="corner">
<label for="corner">Corner</label>

如果你需要知道选择了什么模式:

let mode = document.querySelector('input[name=mode]:checked').value
console.log('Selected mode: ', mode)