Home Tutorial Jquery Highlight text by changing color on every click(Toggle effect)

 
 

Share on Google+Share on Google+
Highlight text by changing color on every click(Toggle effect)
Posted on: July 28, 2010 at 12:00 AM
Advertisement
In this tutorial, we will discuss about how to highlight list element by clicking on it.

Highlight text by changing color on every click(Toggle effect)

In this tutorial, we will discuss about how to highlight list element by clicking on it. In the below example, a list is given, when you click on any element of list, it gets highlighted by changing it's color. If you click already highlighted list element ,it also change it's color. The color sequence or toggle is as follow : blue > red > yellow > no color . This list is cyclic, means it again starts after "no color" .

jqChangeColorOnClick.html

<!DOCTYPE html>
<html>
<head>
<style>
ul { margin:10px; list-style:inside circle; font-weight:bold; }
li { cursor:pointer; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<ul>
<li>Download jquery's set up file</li>
<li>Save it in your personal folder</li>
<li>Create html file save it in same folder</li>
<li>Include it's url in html code </li>
<li>Use script in between script tag</li>
<li>Run your program,simply by double clicking</li>
</ul>
<script>
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":"", "color":"yellow"});
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
</script>
</body>
</html>

The "toggle" effect

The 'toggle' effect is used to bind two or more handlers to the matched elements, to be executed on alternate clicks.

OUTPUT :

After clicking first element one time ,second element two time ,third element three time :

Download Source Code

Click here to see demo

Advertisement

Related Tags for Highlight text by changing color on every click(Toggle effect):


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: July 28, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com