HTML部分:
<div class="mBan">
<img class="mbw" tmpl="45" src="图片路径"></img>
<img class="mbw" tmpl="46" src="图片路径"></img>
<img class="mbw" tmpl="47" src="图片路径"></img>
<img class="mbw" tmpl="48" src="图片路径"></img>
</div>
CSS部分:
.mBan{
margin-top: 13px;
margin-left: 210px;
margin-bottom: 60px;
}
.mbChange{
width: 131px;
height: 203px;
margin-left: 18px;
margin-top: 16px;
-webkit-box-shadow:0 0 5px 5px #cccccc;
-moz-box-shadow: 0 0 5px 5px #cccccc;
box-shadow: 0 0 5px 5px #cccccc;
cursor: pointer;
}
.mbw{
width: 122px;
height: 190px;
margin-left: 26px;
margin-top: 26px;
cursor: pointer;
}
JS部分:
// 模板样式,点击改变图片样式
$(function(){
$(".mbw").click(function(){
$(this).removeClass("mbw");
$(this).addClass("mbChange");
$(this).siblings().removeClass("mbChange");
$(this).siblings().addClass("mbw");
});
});