表單設計:
單選框修改默認樣式：
html:（input隱藏，label顯示需要顯示的樣式）
<ul class="nav nav-tabs choseType" role="tablist">
<li role="presentation" class="active">
<a href="javascript:void(0)" aria-controls="home" role="tab" data-toggle="tab">
<input type="radio" name="type" id="person"><label name="person" for="type">個人</label>
</a>
</li>
<li role="presentation">
<a href="javascript:void(0)" aria-controls="profile" role="tab" data-toggle="tab">
<input type="radio" name="type" id="company"><label name="company" for="type">企業</label>
</a>
</li>
</ul>
CSS:
.choseType{
padding: 0.32rem 0;
border-bottom:none;
li{
label {
padding-left: 0.5rem;
cursor: pointer;
background: url(../../../images/icon/gouxuan1@2x.png) no-repeat left center;
background-size: 0.5rem 0.5rem;
line-height: inherit;
margin-bottom: 0;
font-weight:400;
font-size: 0.3rem;
}
input{
&[type="radio"]{
display:none
}
}
a{
border:none;
}
&.active{
a{
border:none;
}
label{
background: url(../../../images/icon/gouxuan@2x.png) no-repeat left center;
background-size: 0.5rem 0.5rem;
}
}
}
}
JS:
$('label').click(function(){
var radioId = $(this).attr('name');
$('input[type="radio"]').removeAttr('checked') ; $('#' + radioId).attr('checked', 'checked'); if(radioId=="person"){ $("#self").addClass("active").siblings().removeClass("active"); }else{ $("#corporation").addClass("active").siblings().removeClass("active"); }
});