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 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>