Here’s a simple way to highlight elements on a page using jQuery. This example uses the Highlight effect of the jQuery UI library
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery Highlight Elements - DevCurry.com</title>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js">
</script>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js">
</script>
<script type="text/javascript" language="javascript">
$(function () {
$("#btnHighlight").click(function () {
$("p.para").effect("highlight", {}, 4000);
});
});
</script>
</head>
<body>
<input id="btnHighlight" type="button"
value="Highlight Para 1 and 3" /><br /><br />
<p id="para1" class="para">This is Para 1. This is Para 1.
This is Para 1.This is Para 1.This is Para 1.
</p>
<p id="para2">This is Para 2. This is Para 2.
This is Para 2. This is Para 2. This is Para 2.
</p>
<p id="para3" class="para">This is Para 3. This is Para 3.
This is Para 3. This is Para 3. This is Para 3.
</p>
</body>
</html>
As you can see, on the button click, we use the highlight effect on the paragraphs having the ‘para’ class. You can also checkout Click and Highlight Text in a TextBox using jQuery
See a Live Demo
Tweet
About The Author
1 comment:
we can paste the CSS code for p.para
thanks a lot my friend^^
Post a Comment