View Full Version : tab separted news content problems

shout it
09-26-2008, 08:59 PM
I have been messing about with some code, it shows two rows the first contains hyperlinks that when clicked will show the links content in the row below. eg us news uknews business news sport weather etc.
As each link is clicked the content will be shown below the problem i am having is that when the page with the code loads the hyperlinks are visible but no content is displayed until one of the hyperlinks is clicked and then the content is then displayed. what i want is to have one of the links content to be displayed when the page is loaded eg us news is shown on page load as default and then when the links are clicked it will change to the relevant content.
the code is shown below any help will be grateful

<!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! &nbsp;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 theart pyramid.</p> </div> </td> </tr> </tbody></table></body></html>

09-27-2008, 01:06 AM
in your CSS, write a rule for the CSS ID of the news item you want displayed, and set it to display: block;. This will override the display: none set in your CSS class.

shout it
09-27-2008, 01:19 AM
i have very little programming skills how would i go about doing what you suggested?

09-27-2008, 02:32 AM
It's not programming per se so you're lucky
It's CSS which is really easy to learn, but long to master 8)

Look over the links on this page
Also consider getting a back or even better find some other great tutorials on the web.

As an example on what you're looking for, consider this:

#news-uk {display: block;}

shout it
09-27-2008, 01:18 PM
I know what you mean I tried changing the display to block before, hoping that when the page loaded it would show the content and when i click on the next link that content would go and the next content would appear.
But what i did not expect was that no content would appear on page load and that each time i clicked on a link the relevant content would appear along with the content from the link i set to display: block.
It is one of the reasons i put this post up because the more i look into the problem the more confussed:confused: and muggled:confused: i am getting.:confused:

Like i said be fore what i am trying is that when the page loads the uk news will appear as content in the row, when i click on another link the uk news would disappear and the us news would appear in its place. Sounds simply but this has turned into a nightmare so far.

09-27-2008, 04:07 PM
An ID will override the CSS class if they have the same specificity.
Is there any chance you can put this temporary online anywhere?