Add the background color of the selection button with JavaScript and juqery add the background color of the selection button

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.