active的三种写法代替radio和checkbox
效果图:
话不多说,直接上代码
active的三种写法代替radio和checkbox
*,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
div {
width: 400px;
margin: auto;
}
ul {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 30px;
}
ul>li {
width: 50px;
border: 1px solid #000;
border-radius: 5px;
text-align: center;
line-height: 30px;
}
.active {
background: url(demo_img/ico_checkon.png) no-repeat right bottom;
border: 1px solid #b85e17!important;
background-size: 18px 18px!important;
color: #b85e17!important;
}
- 妖
- 魔
- 鬼
- 怪
- 妖
- 魔
- 鬼
- 怪
- 妖
- 魔
- 鬼
- 怪
$("#ul_01 li").click(function() {
$("#ul_01 li").removeClass("active");
$(this).addClass("active");
})
$("#ul_02 li").click(function() {
if($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$("#ul_02 li").removeClass('active');
$(this).addClass('active');
}
})
$("#ul_03 li").click(function() {
if($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
})
作者：小黑2635121987
