<style>
.clear {
	clear: both;
}

#page-wrap {
	width: 760px;
	background: white;
	margin: 20px auto;
	padding: 20px;
}

.button {
	float: left;
	margin: 10px;
}

#home {
	display: block;
	padding: 30px;
}
#home-button {
	opacity: 1.0;
	border-bottom: 1px solid black;
}

#about {
	display: none;
	padding: 30px;
}
#about-button {
	opacity: 0.5;
	border-bottom: 1px solid black;
}

#contact {
	display: none;
	padding: 30px;
}
#contact-button {
	opacity: 0.5;
	border-bottom: 1px solid black;
}
</style>

<script type="text/javascript">
    $(function(){
        	$("#about-button").css({
        opacity: 0.3
    	});
    	$("#contact-button").css({
        opacity: 0.3
    	});
                $("#page-wrap div.button").click(function(){
            	            	$clicked = $(this);
            	                       	if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                                $clicked.animate({
                	opacity: 1,
                	borderWidth: 5
                }, 600 );
                var idToLoad = $clicked.attr("id").split('-');
                $("#content").find("div:visible").fadeOut("fast", function(){
                	$(this).parent().find("#"+idToLoad[0]).fadeIn();
                })
            	}
            	$clicked.siblings(".button").animate({
                opacity: 0.5,
                borderWidth: 1
            	}, 600 );
            });
    });
	</script>

<div id="page-wrap">

<div id="home-button" class="button">

<img src="http://upforme.ru/uploads/0007/e3/f7/61312-5.png" alt="home" class="button" />

</div>

<div id="about-button" class="button">

<img src="http://upforme.ru/uploads/0007/e3/f7/61312-3.png" alt="about" class="button">

</div>

<div id="contact-button" class="button">

<img src="http://upforme.ru/uploads/0007/e3/f7/61312-4.png" alt="contact" class="button">

</div>

<div class="clear"></div>

<div id="content">

<div id="home">

<p>Содержание для пункта home</p>

</div>

<div id="about">

<p>Содержание для пункта about</p>

</div>

<div id="contact">

<p>Это содержание для пункта contact</p>

</div>

</div>

</div>