在写项目的时候 &＃xff0c;难免会遇到有些东西语言无法表达的很清楚。可是又必不可少。这个时候。能有个图片供参考就会很简单明了。我在写一个添加页面的时候。就有个东西很难给用户表达的很清楚。让用户选择。所以就想 做一个单选框 让用户根据图片选择。以前也没尝试过。
现在搞定了 记录一下&＃xff1a;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns&＃61;"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;gb2312" />
<title></title>
<style>
.lanrentuku img{border:1px solid #008800;}
</style>
</head><body>
<script>function myFun(sId) {var oImg &＃61; document.getElementsByTagName(&＃39;img&＃39;);for (var i &＃61; 0; i < oImg.length; i&＃43;&＃43;) {if (oImg[i].id &＃61;&＃61; sId) {oImg[i].previousSibling.previousSibling.checked &＃61; true;oImg[i].style.border &＃61; &＃39;1px solid #FF6600&＃39;;} else {oImg[i].style.border &＃61; &＃39;1px solid #008800&＃39;;}}}
</script>
<div class&＃61;"radio-box"><input type&＃61;"radio" value&＃61; "0" id&＃61; "eastVeh1" name&＃61;"eastVeh" style&＃61;"display:none"> <img id&＃61;"aa" src&＃61;"${rootPath}/common/resource/images/P1.png " onclick&＃61;"myFun(this.id)"> <input type&＃61;"radio" value&＃61; "1" id&＃61; "eastVeh2" name&＃61;"eastVeh" style&＃61;"display:none"> <img id&＃61;"bb" src&＃61;"${rootPath}/common/resource/images/P2.png" onclick&＃61;"myFun(this.id)"> <input type&＃61;"radio" value&＃61; "2" id&＃61; "eastVeh3" name&＃61;"eastVeh" style&＃61;"display:none"> <img id&＃61;"cc" src&＃61;"${rootPath}/common/resource/images/P3.png" onclick&＃61;"myFun(this.id)">
</div>
</body>
</html>
效果图&＃xff1a;
鼠标点击选中图片 图片外层会有一个1像素的红线。
这里边比较关键的是 input 标签的 隐藏属性 display:none
如果感觉选中之后 有个红色框框不是很明显的话 可以使用原来的那种单选框的样式 把 style&＃61;“display:none” 去掉就行。 然后把img标签中的点击事件调用的方法也删除掉。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns&＃61;"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;gb2312" />
<title></title>
<style>
.lanrentuku img{border:1px solid #008800;}
</style>
</head><body>
<div class&＃61;"radio-box"><input type&＃61;"radio" value&＃61; "0" id&＃61; "eastVeh1" name&＃61;"eastVeh" style&＃61;""> <img id&＃61;"aa" src&＃61;"${rootPath}/common/resource/images/P1.png " onclick&＃61;""> <input type&＃61;"radio" value&＃61; "1" id&＃61; "eastVeh2" name&＃61;"eastVeh" style&＃61;""> <img id&＃61;"bb" src&＃61;"${rootPath}/common/resource/images/P2.png" onclick&＃61;""> <input type&＃61;"radio" value&＃61; "2" id&＃61; "eastVeh3" name&＃61;"eastVeh" style&＃61;""> <img id&＃61;"cc" src&＃61;"${rootPath}/common/resource/images/P3.png" onclick&＃61;"">
</div>
</body>
</html>
效果图&＃xff1a;
![[译]技术公司十年经验的职场生涯回顾](https://img8.php1.cn/3cdc5/24912/711/b6574f3292f9dc00.png)
京公网安备 11010802041100号