Javascript-форум - Фильтр по ID

Javascript-форум (https://javascript.ru/forum/)

- Javascript под браузер (https://javascript.ru/forum/css-html/)

- - Фильтр по ID (https://javascript.ru/forum/css-html/59247-filtr-po-id.html)

Фильтр по ID

Добрый день. Нужна помощь с фильтром для портфолио.
По задумке будут работы которые должны сортироваться по категориям, каждая категория имеет свой 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 в пункте меню.
В гугле искал, но найти толком ничего не смог, или не правильно задавал.
Подскажите как правильно реализовать такой фильтр.

sim4ik-one,
попробуйте применить для своего случая
http://javascript.ru/forum/dom-windo...tml#post394123
или иной из вариантов открывашек.

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

Открывашка 234 фильтрация div по id.htm

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>

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