hi friend,
i got your query. i have a sample html file which can navigate the div tabs with next and previous buttons.
Please go through the code and check once.
---------------------------------------------------------------------------------------
<html>
<head>
<title></title>
<SCRIPT type="text/javascript">
function toggleDiv(divId) {
for (var i = 1; i < 4; i++)
{
var tempDivId = "news" + i;
document.getElementById(tempDivId).style.display = 'none';
}
document.getElementById(divId).style.display = 'block';
return false;
}
</SCRIPT>
</head>
<body>
<center>
<DIV ID="news1" style="background:#00FF99;border:1px solid #00FF99;height:auto;width:300px;">
<TABLE style='color:black;width:300px;'>
<tr >
<td colspan=2 style="background:#FFFFFF;"><center><b>This is DIV1</b></center>
</tr>
<tr>
<td>
<td><input type=button id=btnnext1 value="NextDiv1" onclick="toggleDiv('news2');">
</tr>
</table>
</div>
<DIV ID="news2" style="background:#FF9900;display:none;border:1px solid #FF9900;height:auto;width:300px;">
<TABLE style='color:black;width:300px;'>
<tr >
<td colspan=2 style="background:#FFFFFF;"><center><b>This is DIV2</b></center>
</tr>
<tr>
<td><input type=button id=btnpre2 value="PreDiv2" onclick="toggleDiv('news1');">
<td><input type=button id=btnnext2 value="NextDiv2" onclick="toggleDiv('news3');">
</tr>
</table>
</div>
<DIV ID="news3" style="background:#CC9900;display:none;border:1px solid #CC9900;height:auto;width:300px;">
<TABLE style='color:black;width:300px;'>
<tr >
<td colspan=2 style="background:#FFFFFF;"><center><b>This is DIV3</b></center>
</tr>
<tr>
<td><input type=button id=btnpre3 value="PreDiv3" onclick="toggleDiv('news2');">
<td>
</tr>
</table>
</div>
</center>
</body>
</html>
---------------------------------------------------------------------------------------
Regards,
Abdul Hak.
Akiii, if this helps please login to Mark As Answer. | Alert Moderator