abstrakt：html代碼<div class="content">     <div class="top">請(qǐng)選擇信息后加入購(gòu)物車</div>     <div class="good_info"&

html代碼

<div class="content">
    <div class="top">請(qǐng)選擇信息后加入購(gòu)物車</div>
    <div class="good_info">
        <p class="p1">
            <b>版本</b>
            <span>ONE 2001</span>
            <span>ONE 0001</span>
            <span>ONE 10001</span>
        </p>
        <p class="p2">
            <b>機(jī)身顏色</b>
            <span>白色</span>
            <span>黑色</span>
            <span>金色</span>
        </p>
        <p class="p3">
            <b>套餐類型</b>
            <span>標(biāo)配</span>
            <span>套餐一</span>
            <span>套餐二</span>
        </p>
        <p class="p4">
            <b>運(yùn)行內(nèi)存</b>
            <span>2GB</span>
            <span>3GB</span>
            <span>4GB</span>
        </p>
        <p class="p5">
            <b>機(jī)身內(nèi)存</b>
            <span>16GB</span>
            <span>32GB</span>
            <span>64GB</span>
        </p>
        <p class="p6">
            <b>產(chǎn)地</b>
            <span>中國(guó)大陸</span>
            <span>港澳臺(tái)</span>
        </p>
        <p class="p7">
            <b>價(jià)格</b>
            <span>999元搶購(gòu)</span>
        </p>
        <p class="p8">
            <b>數(shù)量</b>
            <input type="text" value="1">
        </p>
        <p class="p9">
            <button>加入購(gòu)物車</button>
            <button>打開購(gòu)物車</button>
        </p>
    </div>
</div>

css代碼

<style type="text/css">
    *{margin:0;padding:0;font-size: 13px;}
    .content{width: 400px;margin:50px auto;}
    .top{width: 100%;height:30px;background: red;line-height: 30px;text-align:center;color:#fff;}
    .good_info{border:1px solid red;border-top:none;padding:15px;}
    .good_info p{line-height: 36px;}
    .good_info p b,.good_info p span{display: inline-block;width:87px;text-align: center;height:28px;line-height: 28px;border:1px solid #ccc;}
    .good_info p b{border:none;}
    .good_info .p8 input{width: 87px;}
    .good_info p button{width:89px;border:none;height:28px;text-align: center;line-height:28px;color:#fff;background:red;}
    .good_info .p9 button:first-child{margin-left:92px;}
    .good_info p span,.good_info p button{cursor:pointer;}
    .good_info p .check{border:1px solid red;color:red;}
</style>

js代碼

<script type="text/javascript">
    $(function () {
        $('span').click(function(){
            if($(this).hasClass('check')){
                $(this).removeClass('check');
            }else{
                $(this).addClass('check').siblings('span').removeClass('check');
            }
        });
    });
</script>

效果圖

Korrigierender Lehrer：韋小寶Korrekturzeit：2018-12-11 09:52:02
Zusammenfassung des Lehrers：寫的很不錯(cuò)！該功能在實(shí)際開發(fā)中使用的也是蠻多的！課后要多多練習(xí)哦！