giwuf,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">.active{
background-color: #0000CD;
color: #FFFFFF;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$(".ages").on("click", "a", function(event) {
event.preventDefault();
$(this).addClass("active").siblings().removeClass("active")
var cls = $(this).data("age");
cls = cls ? "." + cls : ".ped";
$(".ped_holder").find(".ped").hide()
.end().find(cls).show()
})
});
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section-method">
<div class="ages">
<a href="javascript:;" data-age="age_3_6" class="get-age">до 6</a>
<a href="javascript:;" data-age="age_7_10" class="get-age">7-10</a>
<a href="javascript:;" data-age="age_11_16" class="get-age">11-16</a>
<a href="javascript:;" class="get-age-all">Все</a>
</div>
<div class="ped_holder">
<div class="ped age_7_10">от 7 до 10</div>
<div class="ped age_3_6">от 3 до 6</div>
</div>
</div>
</body>
</html>
