我有一个注册页面,上面有两个按钮。点击其中一个按钮,相应的容器就会显示。当点击按钮时,背景颜色会更改并保持不变,即使我选择另一个按钮也是如此。然后,如果我再次选择该按钮,它将恢复为未选中/不活跃状态。
我希望被点击的按钮能够保持其活动颜色,但仅当另一个按钮没有被点击时。如果点击了另一个按钮,则希望第一个按钮恢复原来的背景颜色。
以下是js代码:
谢谢!
我希望被点击的按钮能够保持其活动颜色,但仅当另一个按钮没有被点击时。如果点击了另一个按钮,则希望第一个按钮恢复原来的背景颜色。
以下是js代码:
<script type = "text/javascript">
function displayForm(c) {
if (c.value == "1") {
document.getElementById("container1").style.display = 'inline';
document.getElementById("container2").style.display = 'none';
} else if (c.value == "2") {
document.getElementById("container1").style.display = 'none';
document.getElementById("container2").style.display = 'inline';
} else {}
}
</script>
以下是按钮(对于格式问题,我很抱歉):
<!--SELECTION BUTTONS-->
<form>
<div class="control-group">
<label class="control-label">Are you a:</label>
<div class="controls">
<p><div id="account-type" name="account-type" class="btn-group selection-buttons" data-toggle="buttons-radio">
<button value="1" type="button" name="formselector" onClick="displayForm(this)" id="button1" class="btn btn-info">
Buttons1</button>
<button value="2" type="button" name="formselector" onClick="displayForm(this)" id="button2" class="btn btn-info">Button2</button>
</div></p>
</div>
</div>
</form>
以下是使用Bootstrap的CSS代码:
/* SWITCH BUTTONS */
.selection-buttons button{
width: 140px;
height: 60px;
color: #FFF;
background-color: #FFB10D;
border-color: #fff; /* e59f0b */
}
.selection-buttons .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
color: #FFF;
background-color: #00CC66;
border-color: #fff; /* 00b75b */
}
谢谢!