drkrol,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.punkt {
margin-right: 55px;
font-size: 16px;
color: #0060ff;
border-bottom: 1px dashed #498eff;
cursor: pointer;
}
.punkt:hover {
border-bottom: 1px solid #0060ff;
}
.re-h, .re-h2 {
color: #aaa;
}
.nav-a {
height: 100px;
}
.nav-a .light {
margin-bottom: 15px;
}
.active {
border-bottom: none !important;
color: #aaaaaa !important;
cursor: default;
}
.none {
display:none;
}
.in {
font-size: 24px;
margin-bottom: 140px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".nav-a").on("click",".punkt",function(event) {
var el = $(this), text = "/ "+el.text(),
indx = el.addClass('active').siblings(".punkt").removeClass('active').add(el).index(el),
next = el.parent().next();
$("div", next).addClass("none").eq(indx).removeClass("none");;
$(".light span",el.parent()).text(text);
})
});
</script>
</head>
<body>
<div class="nav-a mot"><div class="s36 light">БЛОК 1 <span class="re-h">/ ОПИСАНИЕ</span></div>
<span class="h-a1 active punkt pt1">Описание</span>
<span class="h-a2 punkt pt1">Тарифы</span>
<span class="h-a3 punkt pt1">Подать заявку</span>
</div>
<div class="in">
<div class="h-b-1">Информация о БЛОК 1</div>
<div class="h-b-2 none">Тарифы БЛОКА 1</div>
<div class="h-b-3 none">Форма подачи заявки на БЛОК 1</div>
</div>
<div class="nav-a mot"><div class="s36 light">БЛОК 2 <span class="re-h2">/ ЦЕНЫ</span></div>
<span class="h-a4 active punkt pt2">Цены</span>
<span class="h-a5 punkt pt2">Зарегистрировать</span>
</div>
<div class="in">
<div class="h-b-4">Цены на блок 2</div>
<div class="h-b-5 none">Регистрация блока 2</div>
</div>
</body>
</html>
|