用JavaScript添加選擇按鈕的背景顏色和juqery添加選擇按鈕的背景色

在項目開發中經常遇到要選擇的按鈕，選擇完之后被選擇的按鈕的背景色會發生變化，表示被選擇

樣式圖如下：

每點擊一個數字，相應的背景色變為藍色，其他的依舊是白色，先用JavaScript實現

html代碼如下：

<div>
                            <ul>
                                <li>
                                    <p id="lyyckick_0" onclick="changeTab('0')" class="addRecharge">100</p>
                                </li>
                                <li >
                                    <p id="lyyckick_1" onclick="changeTab('1')" >500</p>
                                </li>
                                <li>
                                    <p id="lyyckick_2" onclick="changeTab('2')">1500</p>
                                </li>
                                <li>
                                    <p id="lyyckick_3" onclick="changeTab('3')" >2000</p>
                                </li>
                                <li>
                                    <p id="lyyckick_4" onclick="changeTab('4')" >3000</p>
                                </li>
                                <li>
                                    <p id="lyyckick_5" onclick="changeTab('5')" >5000</p>
                                </li>
                                <li>
                                    <p id="lyyckick_6" onclick="changeTab('6')" >10000</p>
                                </li>
                                <li>
                                    <p id="lyyckick_7" onclick="changeTab('7')" >20000</p>
                                </li>

                     </ul>
                        </div>

js代碼如下：

<script type="text/javascript">
            function changeTab(num) {
                for(i=0;i<=9;i++){
                    document.getElementById("lyyckick_"+i).className=""
                }
                    document.getElementById("lyyckick_" + num).className="addRecharge"
            }
        </script>

思維：先把所有的樣式設置為空，然后當前樣式為class=“addRecharge”

第二種為jQuery實現，所以要先引入jQuery.min.js文件，這里不再多說，其最終樣式如下：

css代碼為：

<style type="text/css">
            .money-main {
                height: 7.5rem;
                margin: 1.5rem 1rem;
                background: url(../images/panel_2.png) no-repeat left top;
                background-size: 100%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            .countul {
                display: block;
                overflow: hidden;
                margin-top: .75rem;
            }
            .countul li {
                display: block;
                float: left;
                background: url(img/btn02.png) no-repeat left top;
                background-size: 4.5rem;
                line-height: 3.05rem;
                text-align: center;
                width: 4.5rem;
                font-size: 1.2rem;
                color: #8b5b19;
                margin-left: 1.2rem;
            }
            .countul li.libtn {
                background: url(img/btn03.png);
                color: white;
                background-size: 4.5rem;
            }
        </style>

HTML代碼如下：

<div class="money-main">
            <ul class="countul">
                <li>10</li>
                <li>50</li>
                <li>100</li>
                <li>200</li>
                <li>500</li>
                <li >100</li>
            </ul>
        </div>

jQuery代碼如下：

<script>
        $(function() {
            $('.countul li').click(function() {
                $('.countul li').removeClass('libtn');
                $(this).addClass('libtn');
            });
        });
    </script>

思維：移除所有的樣式，設置當前樣式為class=“libtn”