Question

我有这个代码，我链接IFrame中的几个苍蝇，我希望所选按钮的颜色更改并保持不同，直到按下另一个按钮。

<style>

.myButton:active 
{
position:relative; 
top:1px;


}  
</style>


<a class="myButton " href="" target="someFrame">Button1</a>
<a class="myButton " href="" target="someFrame" >Button 02</a> 
<a class="myButton " href="" target="someFrame">Button 03</a> 
<a class="myButton " href="" target="someFrame">Button 04</a> 
<a class="myButton " " target="someFrame" >Button 05</a>

Answer 1

你可以做的是有一个按下按钮时调用的JS / jQuery函数。该函数类似于下面的伪代码：

function(){
    removeClassFromOtherButtons('activeClass');
    this.addClass('activeClass');
}

然后在您的CSS中，让.activeClass具有不同的彩色背景。

Answer 2

如果您更喜欢没有JavaScript的解决方案，您可以使用一些隐藏的单片机技巧实现这一目标：

input[type="radio"][name="toggleRadio"] {
  display: none;
}

input[type="radio"][name="toggleRadio"] + a label {
  cursor: pointer;
}

input[type="radio"][name="toggleRadio"]:checked + a {
  color: #000;
  text-decoration: none;
}

<input type="radio" name="toggleRadio" id="toggleRadio1"><a href="" target="someFrame"><label class="myButton" for="toggleRadio1">Button1</label></a>
<input type="radio" name="toggleRadio" id="toggleRadio2"><a href="" target="someFrame"><label class="myButton" for="toggleRadio2">Button2</label></a>
<input type="radio" name="toggleRadio" id="toggleRadio3"><a href="" target="someFrame"><label class="myButton" for="toggleRadio3">Button3</label></a>
<input type="radio" name="toggleRadio" id="toggleRadio4"><a href="" target="someFrame"><label class="myButton" for="toggleRadio4">Button4</label></a>
<input type="radio" name="toggleRadio" id="toggleRadio5" checked><a href="" target="someFrame"><label class="myButton" for="toggleRadio5">Button5</label></a>

Answer 3

在您的css文件上创建一个.active类，当按下该按钮并将其从其他按钮中删除时，该类将被添加到按钮中。

var buttons = document.querySelectorAll('.myButton');
buttons.forEach(function(button) {
    button.addEventListener('click', function() {
        toggleClass(buttons, this);
  });
});

function toggleClass(buttons, buttonToActivate) {
  buttons.forEach(function(btn) {
      btn.classList.remove('active');
  });
  buttonToActivate.classList.add('active');
}

Answer 4

因此，:active是一个伪类，在按下按钮或锚时使用。

如果您希望按钮处于活动状态，则需要将其标记为其他类。

var buttons =  document.querySelectorAll('.myButton');
var activeClassName = 'active';

function activeState(items, activeName) {
  for(var i = 0; i < items.length; i++) {
    if(items[i].classList.contains(activeName)) {
      items[i].classList.remove(activeName);
    }
  }
}

for(var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function(e){
    activeState(buttons, activeClassName);
    e.target.classList.add(activeClassName);
  });
}

.myButton {
  position:relative; 
  top:1px;
}

.myButton.active {
  background: #f00;
  color: #fff;
  border-color: #f00;
}

<button class="myButton">Test 1</button>
<button class="myButton">Test 2</button>
<button class="myButton">Test 3</button>
<button class="myButton">Test 4</button>
<button class="myButton">Test 5</button>
<button class="myButton">Test 6</button>

我在这里使用了vanilla javascript，但是这段代码可以使用ES6或Jquery重写，而且会更加简单。

这里有一些参考链接：

Answer 5

点击按钮调用onclick功能使用公共类名从所有按钮中删除活动类，然后将活动类添加到特定按钮

在css中给出你想要选择按钮的颜色

.active{
background:red;}

Onclick功能

$(".mybutton").on("click",function(event){ addclassactive(event.target);
}

function addclassactive (caller){
$(".mybutton").removeClass("active");
$(caller).addClass("active"):
}

选择后如何制作活动按钮

5 个答案: