Царь Леонид,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
ul li {
display:inline;
padding-left:20px;
}
div.first_div {
background-color:#ccc;
height:200px;
margin-top:20px;
}
div.second_div, .third_div, .four_div {
background-color:#ccc;
display:none;
height:200px;
margin-top:20px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$(document)
.ready(function () {
var li = $('[id $= tag]'),
div = $('[class $= div]');
li.click(function (event) {
event.preventDefault();
div.hide()
.eq(li.index(this))
.fadeIn(600);
})
});
</script>
</head>
<body>
<ul>
<li><a href="#" id="first_tag">Первый</a>
</li>
<li><a href="#" id="second_tag">Второй</a>
</li>
<li><a href="#" id="third_tag">Третий</a>
</li>
<li><a href="#" id="four_tag">Четвертый</a>
</li>
</ul>
<div class="first_div">
<h3>Первый див</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus.
Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
</div>
<div class="second_div">
<h3>Второй див</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus.
Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
</div>
<div class="third_div">
<h3>Третий див</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus.
Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
</div>
<div class="four_div">
<h3>Четвертый див</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus.
Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
</div>
</body>
</html>