Ex No: 8 CHANGE LINK CONTENT USING JQUERY
Aim: To write a JQuery code to change the hyperlink and text of an a link.
Algorithm
Step1: Create a folder “Ex8” to place the HTML files.
Step2: Create HTML files “index.html”, “vote.html” and “novote.html”.
Step3: Add the JQuery link to the page.
Step4: Add JQery code to check age and change content of a link.
Source Code

index.html


<!DOCTYPE html>
<html>
 <head>
  <title>Change Hyperlink and Text</title>	
  <style>
	 header {
	  text-align:center;
	  height: 100px;
	  background-color: cyan ;
	  padding: 10px;
	  border-radius: 10px 10px 0px 0px;
	 }
	 footer {
	  text-align:center;
	  font-size: 12px;
	  height: 50px;
	  line-height: 50px;
	  background-color: cyan ;
	  padding: 10px;
	  border-radius: 10px;
	 }
	 article{
	  width: auto;
	  padding: 10px;
	  margin:5px;
	  overflow-x: auto;
	 }
  </style>
  <script src="script/jquery-3.5.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#btnproc").click(function(){
          var age = $("#txtage").val();
          var name = $("#txtname").val();
          if(age >= 18)
          {
           $("a").text(name+": You Can Vote");
           $("a").attr("href","vote.html");
          }
          else
          {
           $("a").text(name+": You Cannot Vote");
           $("a").attr("href","novote.html");
         }
	  });//End of Click Function
	});//End of Ready Function
  </script>
  </head>
  <body>  
   <header>
  	<h1>Change Hyperlink and Text</h1>
   </header>	
   <hr>
   <table>
     <tr>
  	   <td>Enter Your Name:</td>
  	   <td><input type="text" id="txtname"></td>
     </tr>
     <tr>
  	   <td>Enter Your Age:</td>
  	   <td><input type="text" id="txtage"></td>
     </tr>
     <tr>
  	   <td colspan="2"><input type="button" id="btnproc" value="Proceed"></td>
     </tr>
     <tr>
  	   <td colspan="2"><a href="#">Your Option</a></td>
     </tr>
   </table>
   <footer>
  	Developed by K Anbarasan
   </footer>
  </body>
</html>

vote.html


<!DOCTYPE html>
<html>
 <head>
  <title>Option</title> 
  <style>
   header {
    text-align:center;
    height: 100px;
    background-color: cyan ;
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
   }
   footer {
    text-align:center;
    font-size: 12px;
    height: 50px;
    line-height: 50px;
    background-color: cyan ;
    padding: 10px;
    border-radius: 10px;
   }
   article{
    width: auto;
    padding: 10px;
    margin:5px;
    overflow-x: auto;
   }
  </style>
 </head>
 <body>  
  <header>
   <h1>You Can Vote</h1>
  </header> 
  <hr>
  <p> You are eligible to vote.</p>
  <footer>
   Developed by K Anbarasan
  </footer>
 </body>
</html>

novote.html


<!DOCTYPE html>
<html>
 <head>
  <title>Option</title> 
  <style>
   header {
    text-align:center;
    height: 100px;
    background-color: cyan ;
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
   }
   footer {
    text-align:center;
    font-size: 12px;
    height: 50px;
    line-height: 50px;
    background-color: cyan ;
    padding: 10px;
    border-radius: 10px;
   }
   article{
    width: auto;
    padding: 10px;
    margin:5px;
    overflow-x: auto;
   }
  </style>
 </head>
 <body>  
  <header>
   <h1>You Cannot Vote</h1>
  </header> 
  <hr>
  <p> You are not eligible to vote.</p>
  <footer>
   Developed by K Anbarasan
  </footer>
 </body>
</html>
Result: Thus JQuery code is written to change text and hyperlink of a link element.