html button 按钮单选且 高亮
<DIV class="middle">
<div class="containerTarget">
<span class="hover-target1" οnclick="btn(1);">韵达 </span>
<span class="hover-target2" οnclick="btn(2);">中通 </span>
<span class="hover-target3" οnclick="btn(3);">圆通 </span>
</div>
</DIV>
function go_savebtn(e) {
if (e == '1') {
if (document.querySelector(".hover-target1")) {
document.querySelector(".hover-target1").className = 'hover-static1'
}
else {
document.querySelector(".hover-static1").className = 'hover-target1'
}
} else if (e == '2') {
if (document.querySelector(".hover-target2")) {
document.querySelector(".hover-target2").className = 'hover-static2'
}
else {
document.querySelector(".hover-static2").className = 'hover-target2
}
} else if (e == '3') {
if (document.querySelector(".hover-target3")) {
document.querySelector(".hover-target3").className = 'hover-static3'
} else {
document.querySelector(".hover-static3").className = 'hover-target3'
}
}
}
.hover-target1,
.hover-target2,
.hover-target3 {
cursor: pointer;
background-color: #fff(64, 158, 255, 1);
color: #000;
}
.hover-static1,
.hover-static2,
.hover-static3 {
cursor: pointer;
background-color: rgba(64, 158, 255, 1);
color: white;
}
.hover-target1:hover,
.hover-target2:hover,
.hover-target3:hover {
cursor: pointer;
background-color: rgba(64, 158, 255, 1);
color: white;
border-radius: 5px;
border: 1px solid #ccc;
width: 136px;
height: 40px;
}