Valid XHTML 1.0 Transitional

Selecting one of a set

This is paragraph 1.

This is paragraph 2.

This is paragraph 3.

This is paragraph 4.


This is paragraph 5.

The jQuery Code START
  
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    
      function setStyle0() {
        $("p:eq(0)").css("font-style", "italic");
      }
      function setStyle1() {
        $("p:eq(1)").css("font-style", "italic");
      }
      function setStyle2() {
        $("p:eq(2)").css("font-style", "italic");
      }
      function setStyle3() {
        $("p:eq(3)").css("font-style", "italic");
      }
      function setStyle4() {
        $("p:eq(4)").css("font-style", "italic");
      }
      
      function setStyle0b() {
        $("p:eq(0)").css("font-style", "normal");
      }
      function setStyle1b() {
        $("p:eq(1)").css("font-style", "normal");
      }
      function setStyle2b() {
        $("p:eq(2)").css("font-style", "normal");
      }
      function setStyle3b() {
        $("p:eq(3)").css("font-style", "normal");
      }
      function setStyle4b() {
        $("p:eq(4)").css("font-style", "normal");
      }
    </script>
  </head>

  <body>
  <h1>Selecting one of a set</h1>
  <div>
  <p id="p1">This is paragraph 1.</p>
  <p id="p2">This is paragraph 2.</p>
  <p id="p3">This is paragraph 3.</p>
  <p id="p4">This is paragraph 4.</p>
  </div>
  <form action="">
   <input type = "button" value="Select 1st" onclick="setStyle0()"></input>
   <input type = "button" value="Select 2nd" onclick="setStyle1()"></input>
   <input type = "button" value="Select 3rd" onclick="setStyle2()"></input>
   <input type = "button" value="Select 4th" onclick="setStyle3()"></input>
   <input type = "button" value="Select 5th" onclick="setStyle4()"></input>
   <br />
   
   <input type = "button" value="Reset 1st" onclick="setStyle0b()"></input>
   <input type = "button" value="Reset 2nd" onclick="setStyle1b()"></input>
   <input type = "button" value="Reset 3rd" onclick="setStyle2b()"></input>
   <input type = "button" value="Reset 4th" onclick="setStyle3b()"></input>
   <input type = "button" value="Reset 5th" onclick="setStyle4b()"></input>
  </form>
  <p id="p5">This is paragraph 5.</p>