用JavaScript添加选择按钮的背景颜色和juqery添加选择按钮的背景色

Posted 2020-10-13 采姑娘的小乌龟

在项目开发中经常遇到要选择的按钮，选择完之后被选择的按钮的背景色会发生变化，表示被选择

样式图如下：

每点击一个数字，相应的背景色变为蓝色，其他的依旧是白色，先用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”