Question

我有一组按钮。我需要点击的按钮在点击后保持高亮显示。当单击另一个按钮时，我需要最后一个突出显示的按钮返回其原始状态，并且现在突出显示新单击的按钮，依此类推。

<!DOCTYPE html>
<html>
<head>
<style>
#button1 {
width: 100px;
height: 50px;
float: left;
margin-right: 3px;
background-color: red;
}
#button2 {
width: 100px;
height: 50px;
float: left;
background-color: red;
}
#button1:hover {
background-color: yellow;
}
#button2:hover {
background-color: yellow;
}
</style>
</head>
<body>
<div id="button1"></div>
<div id="button2"></div>
</body>
</html>

Answer 1

这是一段简单的代码，它非常简单，只是原生的javscript，但是如果你检查下面的小提琴你可以看到它正常工作

http://jsfiddle.net/y8rbncwj/

var toggle = function (e, old) {
   e.className = "selected";
   document.getElementById(old).className="";

};

不知道你尝试做多少按钮到底有多少，这将切换两个按钮，先点击它变成蓝色，然后点击第二个回到红色，点击按钮变成蓝色等等。

您可以使用css而不使用单选按钮来执行此操作，因为从本质上讲，它们可以在组中工作并且可以切换，为此，您可以将标签设置为带有css的按钮，并隐藏背后的实际切换按钮它

Answer 2

你应该研究JavaScript来实现这一目标。我个人使用jQuery，但简单的JavaScript将适用于这种情况。 W3Schools提供了一个很好的集成介绍，here。

对于您的特定情况，您将需要使用以下内容：

document.getElementById('button1').onclick = function() {
   // Change button1 CSS here
};

此外，您还需要添加此内容以适应#button2以及您提及的其他规则。

Answer 3

查看小提琴here

<强> HTML

<div id="divParent1" class="parentDiv">
    Group 1
    <div id="child1" class="childDiv">
        Child 1
    </div>

    <div id="child2" class="childDiv">
        Child 2
    </div>
</div>

<强> CSS

.parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px; 
 margin:5px;  
 display:relative;
}
.childDiv{
  border:1px solid blue;
  height: 50px;   
  margin:10px;
}
.parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px; 
 margin:5px;  
 display:relative;
}
.childDiv{
  border:1px solid blue;
  height: 50px;   
  margin:10px;
}

<强>的Javascript

$('.childDiv').click(function(){
    $(this).parent().find('.childDiv').css('background-color','#ffffff');
    $(this).css('background-color','#ff0000');
});

试试..

Answer 4

我创建了一个通用类.button和相关的javascript函数来实现这一目标。它将切换多个按钮，只要它们都具有相同的类.button：

CSS：

.button {
    width: 100px;
    height: 50px;
    float: left;
    margin-right: 3px;
    background-color: red;
}

.button:hover,
.button.selected {
    background-color: yellow;
}

JS（使用jQuery）：

var button = $('.button');

button.on('click', function(){
    button.removeClass('selected');
    $(this).addClass('selected');
});

HTML：

<div id="button1" class="button"></div>
<div id="button2" class="button"></div>
<div id="button3" class="button"></div>
<div id="button4" class="button"></div>

小提琴：http://jsfiddle.net/oeegLosw/

两个按钮，一个仍然访问，直到其他点击

4 个答案: