Показать сообщение отдельно
  #2 (permalink)  
Старый 06.11.2018, 22:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>
Ответить с цитированием