用JavaScript添加選擇按鈕的背景顏色和juqery添加選擇按鈕的背景色
在項目開發中經常遇到要選擇的按鈕，選擇完之後被選擇的按鈕的背景色會發生變化，表示被選擇
樣式圖如下：
每點擊一個數字，相應的背景色變為藍色，其他的依舊是白色，先用JavaScript實現
html代碼如下：
<div>
<ul>
<li>
<p id="lyyckick_0" onclick="changeTab(‘0‘)" class="addRecharge">
</li>
<li >
<p id="lyyckick_1" onclick="changeTab(‘1‘)" >500</p>
</li>
<li>
<p id="lyyckick_2" onclick="changeTab(‘2‘)">
</li>
<li>
<p id="lyyckick_3" onclick="changeTab(‘3‘)" >2000</p>
</li>
<li>
<p id="lyyckick_4" onclick="changeTab(‘4‘)"
</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”
用JavaScript添加選擇按鈕的背景顏色和juqery添加選擇按鈕的背景色