Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как отфильтровать определенные div с классами, совпадающие с дата-атрибутами ссылки? (https://javascript.ru/forum/jquery/75795-kak-otfiltrovat-opredelennye-div-s-klassami-sovpadayushhie-s-data-atributami-ssylki.html)

giwuf 06.11.2018 21:54

Как отфильтровать определенные div с классами, совпадающие с дата-атрибутами ссылки?
 
del

рони 06.11.2018 22:47

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>


Часовой пояс GMT +3, время: 20:13.