Super simple yet impossible menu - html

Question

How do I do this?
A menu with 3 links (A B C).
"A.html" is shown at start.
When link "B" is clicked, "A" is faded out and "B" fades in.
Every time a link is clicked. Content is changed by fadeout and fadein.
If possible I would like the browsers back buttom to work.
<div menu>
<link> A </link>
<link> B </link>
<link> C </link>
</div menu>
<div content>
A
</div content>

Answer 1

Try this: http://jsfiddle.net/fAvcq/9/
HTML
<div id="menu">
A
B
C
</div>
<div id="content">A</div>
CSS
.active {
color: red;
}
JS
$(document).ready(function(){
$('#menu a[class=active]').fadeOut('slow');
$('#menu a').click(function(){
$('#menu a[class=active]').fadeIn('slow');
$('#menu a[class=active]').removeClass();
$(this).addClass('active');
$('#menu a[class=active]').fadeOut('slow');
$('#content').html($(this).html());
});
});

Answer 2

you will need javascript or jquery for that
see your impossible possible below:
place your markup like this
<div class="menu">
<ul>
<li class="active">
<a href="#" > A </a>
<div class="A hidden">
<h1> Hello I am A </h1>
<img src="y.jpg">
</div>
</li>
<li>
<a href="#" > B </a>
<div class="B hidden">
<h1> Hello I am B </h1>
<img src="y.jpg">
</div>
</li>
</ul>
</div>
<div class="content">
</div>
and place a simple jQuery code like this:
//find the changeContent function to the click of anchors
$('a').on('click',function(){
changeContent(this);
});
//load the first content by default
changeContent($('li.active').find('a:first'));
function changeContent(target){
$('li').removeClass('active');
$(target).parent().addClass('active');
$('.content').html($(target).siblings('div').html());
}
TADA!! its done.
see this in live