In the project development often encounter the button to select, the selected button after the selection of the background color will change, indicating that is selected
The style diagram is as follows:
Each click of a number, the corresponding background color to blue, the other is still white, first with JavaScript implementation
The HTML code is as follows:
<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>
The JS code is as follows:
<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>
Thinking: Set all the styles to empty first, then the current style is class= "Addrecharge"
The second is implemented for jquery, so first introduce the JQuery.min.js file, where it is no longer said, and its final style is as follows:
The CSS code is:
<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>
The HTML code is as follows:
<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>
The jquery code is as follows:
<script>
$ (function () {
$ ('. Countul li '). Click (function () {
$ ('. Countul li '). Removeclass (' libtn ');
$ (this). addclass (' libtn ');
});
});
</script>
Thinking: Remove all styles, set the current style to class= "LIBTN"
Add the background color of the selection button with JavaScript and juqery add the background color of the selection button