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>