Форум

sim4ik-one · #1 (**permalink**) 02.11.2015, 20:40

Добрый день. Нужна помощь с фильтром для портфолио.
По задумке будут работы которые должны сортироваться по категориям, каждая категория имеет свой id, на странице будет меню которое и должно сортировать работы по id, к примеру:

<div id="menu">
<a href="#cat1">Пункт 1</a>
<a href="#cat2">Пункт 2</a>
<a href="#cat3">Пункт 3</a>
<a href="#cat4">Пункт 4</a>
</div>

<div id="port">
<div id="cat1">Работа 1</div>
<div id="cat3">Работа 2</div>
<div id="cat1">Работа 3</div>
<div id="cat2">Работа 4</div>
<div id="cat3">Работа 5</div>
<div id="cat3">Работа 6</div>
<div id="cat2">Работа 7</div>
<div id="cat2">Работа 8</div>
</div>

При нажатии на кнопки меню, на странице должны показываться только те материалы, которые совпадают с id в пункте меню.
В гугле искал, но найти толком ничего не смог, или не правильно задавал.
Подскажите как правильно реализовать такой фильтр.

рони · #2 (**permalink**) 02.11.2015, 21:06

sim4ik-one,
попробуйте применить для своего случая
скрыть с другим классом tr у table
или иной из вариантов открывашек.

рони · #3 (**permalink**) 02.11.2015, 21:08

sim4ik-one,
id уникально, но ктож об этом сейчас знает

рони · #4 (**permalink**) 02.11.2015, 21:17

sim4ik-one,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .active{
     color:  #8B4513;
     background-color:#00FA9A;
     border: solid 1px #8B4513;
     padding: 3px
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function() {
    var a = $("#menu a"),
        b = $("#port > div");
    a.click(function(event) {
    event.preventDefault()
        $(".active").not(this).click();
        var a = this.getAttribute("href");
        b.filter(function() {
            return a != "#" + this.id
        }).toggle();
        $(this).toggleClass("active")
    })
});
  </script>
</head>

<body>
<div id="menu">
<a href="#cat1">Пункт 1</a>
<a href="#cat2">Пункт 2</a>
<a href="#cat3">Пункт 3</a>
<a href="#cat4">Пункт 4</a>
</div>

<div id="port">
<div id="cat1">Работа 1</div>
<div id="cat3">Работа 2</div>
<div id="cat1">Работа 3</div>
<div id="cat2">Работа 4</div>
<div id="cat3">Работа 5</div>
<div id="cat3">Работа 6</div>
<div id="cat2">Работа 7</div>
<div id="cat2">Работа 8</div>
</div>

</body>

</html>

sim4ik-one · #5 (**permalink**) 02.11.2015, 21:19

рони,
то что нужно, спасибо ОГРОМНОЕ!

Форум

Справочник

Discord чат

Курсы javascript