html性别选择按钮
文章描述：
使用html自定义性别选择按钮
html
<div class="container" style="max-width:500px; margin-top:100px;">
<div class="alert alert-primary">
信息提示
</div>
<div class="sex_box">
<ul>
<li class="slide-block sliding" id="male">男生</li>
<li class="slide-block" id="female">女生</li>
</ul>
</div>
</div>css
* {
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
}
.sex_box {
display: block;
width: 90px;
height: 35px;
margin: 50px auto 0 auto;
padding: 0 5px 0 5px;
background: #007bff; border-radius:5px 5px 5px 5px;
}
.sex_box ul li{
float:left;
width:50%;
height:35px;
display:block;
line-height:30px;
text-align:center;
color:#fff;
}
.sex_box ul li:first-child{
border-radius: 5px 0 0 5px;
height: 29px;
margin: 3px 0 0 0;
}
.sex_box ul li:last-child{
border-radius: 0px 5px 5px 0;
height: 29px;
margin: 3px 0 0 0;
}
.sex_box ul .sliding {
background: #fff;
color: #333;
}script
$('.slide-block').click(function () {
if (!$(this).hasClass('sliding')) {
$(this).parent().find('.slide-block').removeClass('sliding');
$(this).addClass('sliding');
}
var sex = $('.sliding').text() == '男生' ? "男" : '女';
$('input[name="sex"]').val(sex);
//alert(sex);
$('.alert ').text(sex);
});
发布时间：2022/05/05
发表评论