Using jquery to achieve click background color change _jquery

Source: Internet
Author: User
With jquery how to achieve a column to achieve column discoloration, and then click on another column also discoloration, but the original change back to the primary color, I have the array of a (1,2,3, I cycle through the output a value.)
Copy Code code as follows:

<ul>
<li><a onclick= "Show ();" ><b>a[0]<b><a></li>
<li><a onclick= "Show ();" ><b>a[1]<b><a></li>
<li><a onclick= "Show ();" ><b>a[2]<b><a></li>

Click 1,1 discoloration, click 2,2 Color, but 1 will change back to the original color. I show the method implements other functions.
Here's the code for my preliminary interview.
HTML Code:
Copy Code code as follows:

<style type= "Text/css" >
. clckclass{color:red;}
</style>
<script type= "Text/javascript" >
$ (' ul Li a '). bind (' click ', function () {
$ (' ul Li A:not (this) '). Removeclass (' Clckclass ');
$ (this). addclass (' Clckclass ');
});
</script>jscript Code:
<style type= "Text/css" >
. clckclass{color:red;}
</style>
<script type= "Text/javascript" >
$ (' ul Li a '). bind (' click ', function () {
$ ('. Clckclass '). Removeclass (' Clckclass ');
$ (this). addclass (' Clckclass ');
});
</script>

In the above code, the style ' clckclass ' may be used on other elements, using $ ('. Clckclass '). Removeclass (' Clckclass '); Removes the Clckclass style from the element used in the Clckclass style on the screen. This is obviously not the result we want, we just need to move out of ul Li a clckclass style. But then it turns out that the code in the above the only point is that the clckclass can only be used in these several tags, if other use, it may affect the effect, I was not considered, I only considered the Clckclass this style only applies to the above situation, then according to this can make a small change As follows:
JScript Code:
Copy Code code as follows:

<style type= "Text/css" >
. clckclass{color:red;}
</style>
<script type= "Text/javascript" >
var Removeclassa = $ (' ul Li A.clckclass ');
$ (' ul Li a '). bind (' click ', function () {
Removeclassa. Removeclass (' Clckclass ');
$ (this). addclass (' Clckclass ');
Removeclassa = $ (this);
});

</script> this writes that the node that owns the class of Clckclass is saved in the variable, and the next click can be done without a traversal, faster.

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.