html5+jquery选择产品属性框

  • Jesse
  • 2016-03-17 17:39:00
  • 505

html5+jquery选择产品属性框,原理:实际上是在label下隐藏了一组randio单选按钮

<script>
$(function(){
    $('.sel-type :first-child').css({'background-color':'#FF9900','color':'#fff'});
    $('.sel-type :radio:first').attr('checked','checked');
    $('.sel-type :input').hide();
    $('.sel-type a').click(function(){
        $('.sel-type a').css({'background-color':'#fff','color':'#333'});
        $(this).css({'background-color':'#FF9900','color':'#fff'});
    });
});
</script>
<style>
.sel-type a{margin: 10px;padding: 5px;height: 25px;width: 115px;border:1px solid gray; color: #333;text-decoration:none; }
</style>
<div>
    选择类型
    <label>属性1<input type="radio" name="attr" value="1"></label>
    <label>属性2<input type="radio" name="attr" value="2"></label>
    <label>属性3<input type="radio" name="attr" value="3"></label>
</div>