在项目开发中经常遇到要选择的按钮,选择完之后被选择的按钮的背景色会发生变化,表示被选择
样式图如下:
每点击一个数字,相应的背景色变为蓝色,其他的依旧是白色,先用JavaScript实现
html代码如下:
<div>
<ul>
<li>
<p id="lyyckick_0" οnclick="changeTab('0')" class="addRecharge">100</p>
</li>
<li >
<p id="lyyckick_1" οnclick="changeTab('1')" >500</p>
</li>
<li>
<p id="lyyckick_2" οnclick="changeTab('2')">1500</p>
</li>
<li>
<p id="lyyckick_3" οnclick="changeTab('3')" >2000</p>
</li>
<li>
<p id="lyyckick_4" οnclick="changeTab('4')" >3000</p>
</li>
<li>
<p id="lyyckick_5" οnclick="changeTab('5')" >5000</p>
</li>
<li>
<p id="lyyckick_6" οnclick="changeTab('6')" >10000</p>
</li>
<li>
<p id="lyyckick_7" οnclick="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”