How to toggle between two label views on click event of hyperlink using JQuery?


Are you new to JQuery? Then this article will be surely helpful for you. This is a sample application on how to use JQuery for simple display. I have two labels which need to be displayed on click event of hyperlink.

If you create MVC2.0 web application, you will automatically see scripts folder in which "jquery-1.4.1.js" is present. If "jquery-1.4.1.js" is not present then download it and add it as reference to your application.
Creation of HTML file.
Right click on project and Add-> New item -> index.htm file in your application. This file will contain client side code.
Contents of index.htm file


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery First application</title>

<script src ="Scripts/jquery-1.4.1.js" type ="text/javascript">

</script>
<script type ="text/javascript">
$(document).ready(function () {

$('p#mypara').hide();
$('p#mypara2').hide();
$('a#myanchortag').click(function () {
$('p#mypara').show();
$('p#mypara2').hide();
});
$('a#myanchortag2').click(function () {
$('p#mypara2').show();
$('p#mypara').hide();
});
});

</script>
</head>
<body >
<a id="myanchortag" href ="#" >
Click here to view paragraph one.
</a>
<br />
<a id="myanchortag2" href ="#" >
Click here to view paragraph two.
</a>
<p id="mypara">
<label >You are watching paragraph one.</label>
</p>
<p id="mypara2">
<label >You are watching paragraph two.</label>
</p>
</body>
</html>

If you click on first anchor tag then you are able to see paragraph one.
Else if you click on second anchor tag then you are able to see paragraph two.
Set start up page
Right click on index.htm and click on "Set as start page" and execute the application.
You are able to see the output.


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: