Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.11.2015, 20:40
Интересующийся
Отправить личное сообщение для sim4ik-one Посмотреть профиль Найти все сообщения от sim4ik-one
 
Регистрация: 02.11.2015
Сообщений: 23

Фильтр по 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, 02.11.2015 в 20:45.
Ответить с цитированием
  #2 (permalink)  
Старый 02.11.2015, 21:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sim4ik-one,
попробуйте применить для своего случая
скрыть с другим классом tr у table
или иной из вариантов открывашек.
Ответить с цитированием
  #3 (permalink)  
Старый 02.11.2015, 21:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sim4ik-one,
id уникально, но ктож об этом сейчас знает
Ответить с цитированием
  #4 (permalink)  
Старый 02.11.2015, 21:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Открывашка 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>
Ответить с цитированием
  #5 (permalink)  
Старый 02.11.2015, 21:19
Интересующийся
Отправить личное сообщение для sim4ik-one Посмотреть профиль Найти все сообщения от sim4ik-one
 
Регистрация: 02.11.2015
Сообщений: 23

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

Последний раз редактировалось sim4ik-one, 02.11.2015 в 21:22.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фильтр сортировки съедает карусель ligisayan jQuery 5 01.07.2015 12:40
Фильтр по начальным символам Shasoft Angular.js 9 22.03.2015 09:25
ng-repeat кастомный фильтр для фильтрации обьектов (непонятное поведение) VerDiz Angular.js 10 04.08.2013 15:42
Фильтр каталога Nivans Элементы интерфейса 4 15.07.2012 15:27
Фильтр. Допускаются только цифры. балерун Элементы интерфейса 11 11.12.2009 16:12