css class嵌套

標籤：

css 代碼：

<style>    .chose_bonus {        font-size:9px;width:400px;border: 2px solid #dddddd;margin-top:5px;margin-bottom:5px;padding:9px;background:#ecf3fc; color:#FFF;    }
    .chose_bonus.active{
　　//.chose_bonus .active{  之前是這麼寫的，不通，後換成上面的方式，就OK 了    
        background: #ecf3fc url(/ui/common/images/checked-blue.png) no-repeat right bottom;
 border: 2px solid #467cbd;

 }</style>

JS代碼：

<script type="text/javascript">    $(‘.chose_bonus‘).click(function(){        if ($(this).hasClass("active")) {            $(this).removeClass("active");        }else{            $(this).addClass("active");            }    })</script>

html代碼：

            <tr class="bonus">                <th width="120">可選紅包</th>                <td >                <!--{loop $bonuslist[‘list‘] $key $bonus}-->                <div class="chose_bonus" id="{$bonus[‘id‘]}">                    <span style="font-weight:bold;color:#000;">紅包：</span><b style="color:#fbb450;">金額{$bonus[‘total_value‘]}元 剩餘：{$bonus[‘balance_value‘]}元</b> <br/>                    <span style="font-weight:bold;color:#000;">時效：</span><span style="color:#000;font-weight:bold;"> {$bonus[‘start_time‘]}~{$bonus[‘end_time‘]} </span><br/>                    <span style="font-weight:bold;color:#000;">規則：</span><span style="color:#000;"> {$bonus[‘rule_value‘]}</span>                </div>                <!--{/loop}-->                </td>            </tr>

 

css class嵌套