Explanation : Part 1
the page loads, the hidestories() function is called (with the
'window.onload' bit). This finds the #stories div then hides all the
divs inside that with the class 'story' and makes them 'display:none;'.
Then, to show the first story onload, a variable is sent to the stories() function.
stories() function assigns another function
(with no name) to the onclick event of each of the links at the top. It
finds the element with the id #thebuttons and identifies the links in
that. The function that is attached to the links first runs the
hidestories() function, then takes the part of the link after the '#'
and turns it into a variable. The div that was being linked
to is then displayed ('display:block;') and the link itself returns
Explanation : Part 2
work as normal and all the content will still be readable.
The bad thing about this - just like on (the page I had here before)
- is that when the page first loads, you can see all of the content for
intranet and are able to control the browsers, or if you just don't
class 'story' to 'display:none;' in your CSS.
Explanation : Part 3
There are some rules for the 'current' class in the CSS. The 'current' class is assigned to the li of the first button onload. The onclick function has a bit to set the add the 'current' class to the clicked button, and the 'hidestories2' function has a bit that removes the 'current' class from the other buttons.
Of course, you can also do this whole 'switch content' thing with AJAX.
to change the content of the page by only refreshing the content part.