Скрытие div'ов
 

Суть такова - есть 4 ссылки и 4 скрытых diva, условно:

<a href="#" id="link1">Текст</a>
<a href="#" id="link2">Текст2</a>
<a href="#" id="link3">Текст3</a>
<a href="#" id="link4">Текст4</a>

<div id="div1" class="bar"></div>
<div id="div2" class="bar"></div>
<div id="div3" class="bar"></div>
<div id="div4" class="bar"></div>

В классе прописано display:none;
Как сделать так, чтобы при нажатии на ссылку появлялся соответствующий div, но остальные оставались скрытыми, а при нажатии на другую ссылку, другой div открывался, а предыдущий скрывался ?
Уже несколько дней пытаюсь сделать, ничего не получается.

Например так:

http://jsfiddle.net/4ANNZ/8/

Разобрался уже. Кому интересно сделал так http://jsfiddle.net/MzE94/

ёпт, по моему более сложную реализацию трудно придумать)
вот вариант

Мда уж... :)

<a href="#" rel="box-1">Link 1</a>
<a href="#" rel="box-2">Link 2</a>
<a href="#" rel="box-3">Link 3</a>

<div class="box">
	<div class="box-1">Box 1</div>
	<div class="box-2">Box 2</div>
	<div class="box-3">Box 3</div>
</div>

.box div {
	background: blue;
	display: none;
	height: 100px;
	width: 100px;
}

var box = $('.box');
$('a[rel^="box"]').click(function() {
	var id = this.rel.split('-')[1];
	box.find('div').hide();
	box.find('.box' + id).show();
});