Как скрыть все DIV кроме заданного ID при клике?

@sibfox777 · Регистрация: 24.11.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте, на странице есть меню-фильтр из ссылок вида:

HTML5
1
2
<a href="#nomer1">Фильтр1</a>
<a href="#nomer2">Фильтр2</a>

*Всего их 8 штук

Под ними есть такие дивы:

HTML5
1
2
3
<div id="nomer1" >КОНТЕНТ</div>
<div id="nomer1" >КОНТЕНТ</div>
<div id="nomer2" >КОНТЕНТ</div>

Вопрос:
Как при клике по ссылке [#nomer1] скрыть [display:none] все дивы кроме [id="nomer1"]

@Lazy_Den · 24.11.2014, 20:08

sibfox777, на одной странице, не может быть два и более элементов с одинаковыми id. Исходя из этого неоспоримого правила, изменяем id на классы и вот возможный вариант решения:

HTML5
1
2
3
4
5
6
<a href="" data-rel=".nomer1">Фильтр1</a>
<a href="" data-rel=".nomer2">Фильтр2</a>
 
<div class="nomer1" >КОНТЕНТ, группа 1</div>
<div class="nomer1" >КОНТЕНТ, группа 1</div>
<div class="nomer2" >КОНТЕНТ, группа 2</div>

JavaScript
1
2
3
4
$('a').on('click', function(e){
    e.preventDefault();
    $('div').show().not($(this).data('rel')).hide();
});

@sibfox777 · 25.11.2014, 14:16 **[ТС]**

Lazy_Den, спасибо, твой пример работает. А мой нет((( Непойму почему...

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns# video: http://ogp.me/ns/video# ya: http://webmaster.yandex.ru/vocabularies/">
 
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script type="text/javascript">
$('a').on('click', function(e){
    e.preventDefault();
    $('div').show().not($(this).data('rel')).hide();
});
</script>
</head>
 
<body>
<a href="" data-rel=".nomer1">Фильтр1</a>
<a href="" data-rel=".nomer2">Фильтр2</a>
 
<div class="nomer1" >КОНТЕНТ, группа 1</div>
<div class="nomer1" >КОНТЕНТ, группа 1</div>
<div class="nomer2" >КОНТЕНТ, группа 2</div>
</body>
</html>

@Lazy_Den · 25.11.2014, 14:31

sibfox777, забыли код обернуть:

JavaScript
1
2
3
$(function(){
   // тут код jQuery
});

@sibfox777 · 25.11.2014, 14:52 **[ТС]**

Да, заработало.

А я правильно понимаю, что этот скрипт:
1) скрывает абсолютно ВСЕ дивы на странице? Т.е. при клике я получаю белую страницу.
2) Это происходит при клике на любую ссылку, даже без data-rel=".nomer1"

Можно ли ограничить область выполнения этого скрипта только для div class="event-img

Т.е. у меня на странице есть дивы вида:

HTML5
1
2
3
div class="event-img Фильтр1"
div class="event-img Фильтр2"
div class="event-img Фильтр3"

и применять скрытие нужно только для них.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="event-block">
                <div class="event-img МИИТ" style="background: url(/images/event/small/event_15.jpg) center center no-repeat">
                                        <div class="e-date" onclick="window.location='/event/event_15.html'">
                        <p class="e-day">1</p>
                        <p class="e-month">декабря</p>
                        <p class="e-year">2014</p>
                    </div>
                </div>
                <div class="event-title">
                    <a href="/event/event_15.html">«ТранспАрт – 2014»</a>
                </div>
                <div class="event-org">#МИИТ</div>
                <div class="event-sdesc">
                     Фестиваль студенческого творчества 
                </div>
                <a href="/event/event_15.html" class="event-lnk"></a>
            </div>

@Lazy_Den · 25.11.2014, 15:32

sibfox777, используйте те селекторы, которые считаете нужными. Мы же разбирали принцип, а не частный случай.

@sibfox777 · 25.11.2014, 16:04 **[ТС]**

Lazy_Den, ещё раз спасибо!
Погуглил, вставил селектор.
Фильтрация на демо-странице работает отлично!

JavaScript
1
2
3
4
5
6
$(function(){
$('a').on('click', function(e){
e.preventDefault();
    $('div.event-block').show().not($(this).data('rel')).hide();
                                               });
});

Но увидел проблему в e.preventDefault();, которая блокирует клики по любым ссылкам на странице?
Это вообще возможно решить? Куда копать?

@Lazy_Den · 25.11.2014, 16:18

Сообщение от sibfox777

Это вообще возможно решить? Куда копать?

Возвращаемся к предыдущему вопросу о селекторах. Укажите класс нужных вам ссылок или любой другой признак, по которому обрабатывать событие будет только на них.

Добавлено через 3 минуты
P.S. Посмотрите

@sibfox777 · 25.11.2014, 16:31 **[ТС]**

МАГИЯ!

@moireceptik · 17.09.2018, 16:53

По вашему примеру сделала так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="popup">
    <a class="popup-link" href="#pop-zvon">Заказать звонок</a>
    <div class="popup-box hidden" id="pop-zvon">форма заказа</div>
    <div class="popup-box hidden" id="pop-zvon-2">форма заказа 2</div>
</div>
 
<br><br><br><br><br>
 
<div class="popup">
    <a class="popup-link" href="#pop-login">Личный кабинет</a>
    <div class="popup-box hidden" id="pop-login">форма входа</div>
    <div class="popup-box hidden" id="pop-login-2">форма входа 2</div>
</div>

JavaScript
1
2
3
4
$('.popup-link').on('click', function(e){
    e.preventDefault();
    $('.popup-box').fadeToggle(200).not($(this).attr('href')).hide();
});

https://jsfiddle.net/moireceptik/gc6fjvep/

ВОПРОС: как мне теперь добавить класс .active к ссылке .popup-link, по которой мы кликнули???

Чтобы получилось так:
1. При клике на ссылку = показываем блок и добавляем .active на ссылку, еще раз кликнули = блок скрылся и класс .active убрался.
2. Если кликнули по ссылке "Заказать звонок" = добавился к ней класс .active, потом кликнули на ссылку "Личный кабинет" = класс .active теперь перешел сюда, а с прошлой ссылки убрался?

@sad67man · 17.09.2018, 17:04

moireceptik,

JavaScript
1
2
3
4
5
6
$('.popup-link').on('click', function(e) {
  e.preventDefault();
  $('.popup-link').not(this).removeClass('active');
  $(this).toggleClass('active');
  $('.popup-box').fadeToggle(200).not($(this).attr('href')).hide();
});

@moireceptik · 17.09.2018, 17:08

Спасибо огромное! Работает!!!

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	25.11.2014, 15:32
	sibfox777, используйте те селекторы, которые считаете нужными. Мы же разбирали принцип, а не частный случай. 0

@sibfox777 0 / 0 / 0 Регистрация: 24.11.2014 Сообщений: 5
	25.11.2014, 16:31 [ТС]
	МАГИЯ! 0

@moireceptik 0 / 0 / 0 Регистрация: 14.09.2015 Сообщений: 3
	17.09.2018, 17:08
	Спасибо огромное! Работает!!! 0