单选-多选-图片替换效果-简单实用_js 多图片单选效果-CSDN博客

本文链接：https://blog.csdn.net/m0_37596829/article/details/79885279

单选多选的选中是很难修改样式-所以就有了各种替换方案---

一下就是我曾用的一种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
a { text-decoration: none; }
a:link { color: #666666; }
a:visited { color: #666666; }
a:hover, a:active, a:focus { color: #000000; text-decoration: none; }
.net_list{
	width: 500px;
	margin: 10px auto;
}
.net_list a{
	display: block;
	background: url(img/icon_nos.png) no-repeat left;
	padding-left: 20px;
	line-height: 30px;
}
.net_list a.on{
	background: url(img/icon_s.png) no-repeat left;
}
.net_list2{
	width: 500px;
	margin: 10px auto;
}
.net_list2 a{
	display: block;
	background: url(img/icon_nos.png) no-repeat left;
	padding-left: 20px;
	line-height: 30px;
}
.net_list2 a.on{
	background: url(img/icon_s.png) no-repeat left;
}
	</style>
	<body>
		<div class="net_list">
			<a href="javascript:void(0)">小明真好</a>
			<a href="javascript:void(0)">小明真好</a>
			<a href="javascript:void(0)">小明真好</a>
			<a href="javascript:void(0)">小明真好</a>
			<a href="javascript:void(0)">小明真好</a>
			<a href="javascript:void(0)">小明真好</a>
			<a href="javascript:void(0)">小明真好</a>
		</div>
		
		<div class="net_list2">
			<a href="javascript:void(0)">小明真好</a>
			<a href="javascript:void(0)">小明真好</a>
			<a href="javascript:void(0)">小明真好</a>
			<a href="javascript:void(0)">小明真好</a>
			<a href="javascript:void(0)">小明真好</a>
			<a href="javascript:void(0)">小明真好</a>
			<a href="javascript:void(0)">小明真好</a>
		</div>
	</body>
	<script src="../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(".net_list a").click(function(){
				$(this).addClass("on").siblings().removeClass("on");
			})
		$(".net_list2 a").click(function(){
			if($(this).hasClass("on")){
				$(this).removeClass("on")
			}else{
				$(this).addClass("on");
			}
			})
	</script>
</html>