Question

我有3个按钮代表3个状态。我喜欢当我推动其中一些按钮保持在视觉状态时按下＆＃34;状态和其他2处于正常非推动状态。

这是我使用的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

但是，它没有用。

Answer 1

你不需要JS！

这是一种仅限CSS的方式：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如果您需要知道选择了什么模式：

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

Answer 2

这是你如何做你想做的一种方式

当您单击某个按钮时，您将从所有按钮中删除推送类，然后将该类添加到单击的按钮中。

＆＃13;

function setMode(e, itemType) {

  var els = document.getElementsByClassName("pushed");

  Array.prototype.forEach.call(els, function(el) {
    el.classList.remove('pushed');
  });

  document.getElementById(itemType).classList.add('pushed');

}

＆＃13;

.pushed {
  border-style: inset;
}

button {
  outline: none;
}

＆＃13;

<button id="defaultMode" onclick="setMode('link', 'defaultMode');">Default</button>
<button id="orthoMode" onclick="setMode('link', 'orthoMode');">Ortho</button>
<button id="cornerMode" onclick="setMode('link', 'cornerMode');">Corner</button>

＆＃13;

Answer 3

itemType 未定义一。您应该定义var itemType = 'default'

或

您可以在DOM中创建函数

function setMode(link,itemType){
if (itemType === 'default') {
  document.getElementById("defaultMode").classList.remove('non-pushed');
  document.getElementById("defaultMode").classList.add('pushed');
  console.log(document.getElementById("defaultMode").outerHTML)
}
}

.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 4

这是一个只有CSS的解决方案，带有实际按钮：

.pushed {
  border-style: inset;
  margin: 0 1px
}

#buttons > span {
  position: relative;
}

#buttons input[type=radio] {
  position: absolute;
  width: 100%;
  height: 1.4em;
  opacity: 0
}
#buttons input[type=radio]:checked ~ button {
  border: inset
}

<div id="buttons">
  <span><input id="default" type="radio" name="mode" checked><button>Default</button></span>
  <span><input id="ortho" type="radio" name="mode"><button>Ortho</button></span>
  <span><input id="corner" type="radio" name="mode"><button>Corner</button></span>
</div>

Answer 5

你不需要javascript。 CSS就足够了。使用:active伪类。

button {
  background-color: #ccc;
  border: outset 3px #666;
}

button:hover {
  background-color: #E5E5E5;
}

button:active {
  background-color: #bbb;
  border: inset 3px #666;  
}

<button>Hello!</button>

如何制作按钮＆＃34;＃34;影响？

5 个答案: