商品样式选择

来源：互联网发布：asp.net mvc5项目源码编辑：程序博客网时间：2024/05/22 07:04

html

<div>    <b class="ml0 border0">规格：</b>    <div class="list mt20">        <span class="kept bdc4" >纪念卡(10张/套)</span>        <span class="aliens bdc0">异形卡</span>        <span class="even bdc0">连号套卡(2张/套)</span>    </div>    <b class="ml0 border0 ">图案：</b>    <div class="list mt20">        <span class="dolma bdc4"><i></i>度母像卡</span>        <span class="pisces bdc0"><i></i>双鱼异形卡</span>        <span  class="diamond bdc0"><i></i>菱形异形卡</span>    </div></div>

css

.bdc0{border: 2px solid #c0c0c0;color: #999;}.bdc4{border: 2px solid #c4a152!important;color: #333333;}

js

<script>    $(document).ready(function () {//       度母套卡        $('.kept').click(function () {            $(this).addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");            $(".dolma").addClass('bdc4').siblings().removeClass('bdc4');            $(".pisces").removeClass('bdc4').addClass("bdc0");        });        $('.dolma').click(function () {            $(this).addClass('bdc4').siblings().removeClass('bdc4').remove("cddd").addClass("bdc0");            $(".kept").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");//            $(".pisces").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");        });//       异形卡        $('.aliens').click(function () {            $(this).addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");            $(".pisces").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");        });        $('.diamond').click(function () {            $(this).addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");            if($(".kept").is(".bdc4")){                $('.kept').removeClass("bdc4").addClass("bdc0");                $(".aliens").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");            }//            $(".diamond").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");        });        $('.pisces').click(function () {            $(this).addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");            if($(".kept").is(".bdc4")){                $('.kept').removeClass("bdc4").addClass("bdc0");                $(".aliens").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");            }        });//       连号卡        $('.even').click(function () {            $(this).addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");            $(".pisces").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");        })    });</script>

0 0