Use jquery to change the background color of the clicked Column

Source: Internet
Author: User

How can I use jquery to change the color of a topic when I click another topic? But the original color is changed back. I have an array a (1, 2, 3, I cyclically print the value of.
Copy codeThe Code is 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 to change color. Click to change color, but 1 will change back to the original color. Other functions are available in my show method.
The following is my initial code:
HTML code:
Copy codeThe Code is 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 code above, the style 'clckclass' may be used on other elements, using $ ('. clckclass '). removeClass ('clckclass'); Removes the elements using the clckClass style on the screen from the clckClass style. This is obviously not the result. We only need to remove the clckClass style under ul li. However, later I found that the only point in the above Code is that the clckClass can only be used in these labels. If other labels are used, the effect may be affected, which is not considerate to me, I have only considered the situation where the clckClass style is only applied here, so we can make a small modification based on this, as shown below:
JScript code:
Copy codeThe Code is 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> in this way, the nodes with the clckClass class are saved in the Variable. You do not need to traverse the nodes during the next click, which is faster.

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.