i have used the following code to produce a table with two rows.
the first has hyperlinks that when clicked will the links contents in the second row, if another link in the first row is clicked it will then change the second rows contents to the link that has been clicked. The code is below
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Hidden DIVs</title>
<style type="text/css">
.news {
display: none;
}
</style>
<script type="text/javascript">
function hideSections() {
document.getElementById('news-us').style.display='none';
document.getElementById('news-uk').style.display='none';
document.getElementById('news-africa').style.display='none';
}
function showNews(section) {
hideSections();
newsItem = document.getElementById('news-'+section);
if (newsItem) {
newsItem.style.display='block';
}
}
</script>
</head>
<body>
<table style="text-align: left; width: 100%;" border="2" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="text-align: center;"><a onclick="showNews('us');" href="#">US News</a></td>
<td style="text-align: center;"><a onclick="showNews('uk');" href="#">UK News</a></td>
<td style="text-align: center;"><a onclick="showNews('africa');" href="#">Africa News</a></td>
</tr>
<tr>
<td colspan="3">
<div class="news" id="news-us">
<p>This is the news from the US:</p>
<p>The economy is in SERIOUS trouble! Yikes!!!!!</p>
</div>
<div class="news" id="news-uk">
<p>This is the news from the UK:</p>
<p>Jaguar Motorcars unveils a stunning new Jag today.</p>
</div>
<div class="news" id="news-africa">
<p>This is the news from Africa:</p>
<p>The Pharoahs have returned to build a new, state of the
art pyramid.</p>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The major problem i have now is that each time the code is loaded the first row is shown but no content is displayed until you click on one of the links.
What i want to do is when the page is loaded one of the links content will be displayed by default eg when you load the page the us news section content would be displayed by default every time the page is loaded.
Can anyone help?
26 Sep, 2008 - 04:04 PM
| 