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;

}

相关推荐
会豪3 小时前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪3 小时前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__3 小时前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工3 小时前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主3 小时前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端
ruanCat3 小时前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
Codebee3 小时前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能
叫我詹躲躲3 小时前
开发提速?Vue3模板隐藏技巧来了
前端·vue.js·ai编程
华仔啊3 小时前
面试都被问懵了?CSS 的 flex:1 和 flex:auto 真不是一回事!90%的人都搞错了
前端·javascript
前端康师傅3 小时前
JavaScript 函数详解
前端·javascript