CSS Button Action To Hide Text

I want to build a website that has 4 buttons on the left, which change the text in the main window of the site (traditionally that they would take the user to another seperate page).

What I would like it to do is not have to go to another page when the button is click, but rather to hide the text that is in the main window, and change it to the text th开发者_如何学JAVAat is for that new page.

Is there a way to hide the text, and show different text, using CSS?

Thanks for any help.

It is possible with CSS 2 and no javascript. I made an example for you to see here: http://jsfiddle.net/theguywholikeslinux/QQrFy/

I haven't actually tested it for browser compatibility but I believe it works in most browsers that support css 2 and positioning reasonably well (including older versions of IE). Accessibility will be perfectly fine as long as you don't mind screen readers reading each page at a time all in one go. (although some confusion might be caused by the links).

Essentially there are 4 divs that all have an id set and a specific width, height and positioning (essentially they are all on top of each other). The links are href="#id#" and when you click them the relevant div comes to the top of the stack so you can see it.)

Only downsides are it can cause weird scrolling problems (e.g links at top of page, content to change all the way at the bottom) and you have to have the same fixed size for all of the elements. So if you want to have pages like this that are going to be more than ~700px tall then your pages that only include 200px of content will still scroll down for another 500px.

You cannot do this in css2! You need a javascript

Update: You can do it with css 3. Please see example: http://jsfiddle.net/RUDyw/

found here: http://dev.opera.com/articles/view/css3-show-and-hide/

No, you need javascript. JQuery or something of the likes will make it easy.

$('#button1').click(function() {
  $('#mainwindowtext').text("new text");
});