karakym,
<!doctype html>
<html lang="ru-RU">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="HandheldFriendly" content="true">
<title>Default Page Title</title>
<!--<link rel="shortcut icon" href="img/favicon.ico">
<link rel="icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/responsive.css"/>-->
<link rel="stylesheet" type="text/css" href="http://bplus.advokat-alekseenko.dp.ua/test/css/base.css"/>
<link rel="stylesheet" type="text/css" href="http://bplus.advokat-alekseenko.dp.ua/test/css/style.css"/>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
#sections>section{
transition: all 0.8s;
opacity: 0;
}
#sections>section:first-child{
opacity: 1;
}
</style>
</head>
<body>
<aside>
<nav>
<a href="#main">Главная<i class="icon"></i></a>
<a href="#about">О нас<i class="icon"></i></a>
<a href="#revs">Отзывы<i class="icon"></i></a>
<a href="#adrs">Адреса<i class="icon"></i></a>
<a href="#feed">Контакты<i class="icon"></i></a>
</nav>
</aside>
<div id="sections">
<section id="main">
<h1>Главная</h1>
<h2>This is main page</h2>
</section>
<section id="about">
<h1>О нас</h1>
<h2>This is main page</h2>
</section>
<section id="revs">
<h1>Отзывы</h1>
<h2>This is main page</h2>
</section>
<section id="adrs">
<h1>Адреса</h1>
<h2>This is main page</h2>
</section>
<section id="feed">
<h1>Контакты</h1>
<h2>This is main page</h2>
</section>
</div>
<script type="text/javascript" src="http://bplus.advokat-alekseenko.dp.ua/test/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$("nav a").click(function (event) {
event.preventDefault()
var href = $(this).attr("href");
$("#sections>section").css("opacity", function() {
return this == $(href)[0] ? 1 : 0
});
}); </script>
</body>
</html>