Как правильно показывать один див и скрывать другой?

@sly444 · Регистрация: 29.12.2010

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

Привет!
В своих проектах всегда использую плавное открытие блока div через fadeIn. Делаю так - проверяю есть ли класс актив. Если нет - добавляю его и показываю div. Если есть - тогда скрываю блок через fadeOut.

Теперь встал вопрос. У меня есть блок внутри которого 4 таких скрытых div. Надо при нажатии на кнопку 1, показывать первый див, так же через fadeIn. При нажатии на кнопку 2, открытый должен уходить через fadeOut, и показываться второй блок. Я приблизительно знаю как такое реализовать, но для этого нужно создавать кучу доп классов и проверять их. Думаю есть решение куда легче, просто я его не знаю.

Надеюсь на вашу помощь!

@Lazy_Den · 09.03.2016, 02:43

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

проверяю есть ли класс актив

Лишняя работа. Метод fadeToggle в помощь.

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

4 таких скрытых div

Пример в песочнице

JavaScript
1
2
3
4
5
6
7
8
9
var buttons = $('.buttons button'),
boxes = $('.container > div');
buttons.on('click', function(){
    var indx = buttons.index(this);
    boxes.not(':eq(' + indx + ')').fadeOut();
    boxes.eq(indx).fadeIn(); // или .fadeToggle();
    // или такой синтаксис, вместо двух предыдущих строчек
    // boxes.not(':eq(' + indx + ')').fadeOut().end().eq(indx).fadeIn();
});

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="buttons">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
</div>
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

@sly444 · 09.03.2016, 03:16 **[ТС]**

Lazy_Den, спасибо! Метод работает, однако есть одно НО. Если я два раза нажимаю на одну и ту же кнопку, тогда блок должен после первого нажатия показываться, а после второго исчезать. А у Вас выходит, что если блок любой хоть раз вызвал - то все, назад уже не заедет. Как это легче всего решить?

А еще подскажите, пожалуйста, зачем используется on? Я всегда пишу просто $('div').click(function( . Без on. Разница есть? А то видел, некоторые пишут так, некоторые используют on.

@Lazy_Den · 09.03.2016, 03:33

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

А у Вас выходит

Вы читаете внимательно? Я вам про метод fadeToggle говорил выше и в самом коде указал в комментариях.

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

зачем используется on?

Метод .on() для установки обработчика событий. Кроме того, с помощью него устанавливается делегированная обработка событий. Если у вас элемент не добавляется динамически, то разницы нет.

@sly444 · 10.03.2016, 01:30 **[ТС]**

Lazy_Den, Спасибо огромное! Все работает!

Добавлено через 11 часов 30 минут
Lazy_Den, Подскажите, пожалуйста, можно ли функции fadeToggle добавить анимацию slide? Нужно, чтобы блоки вылезали через slideUp, и уползали через slideDown. Можно ли эту анимацию как-то применить, используя fadeToggle?

@Lazy_Den · 10.03.2016, 08:55

sly444, а чем slideToggle() не угодил?

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия SDL 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual. . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@sly444 5 / 5 / 3 Регистрация: 29.12.2010 Сообщений: 146

	Как правильно показывать один див и скрывать другой? 09.03.2016, 02:21. Показов 2144. Ответов 5 Метки нет (Все метки) Привет! В своих проектах всегда использую плавное открытие блока div через fadeIn. Делаю так - проверяю есть ли класс актив. Если нет - добавляю его и показываю div. Если есть - тогда скрываю блок через fadeOut. Теперь встал вопрос. У меня есть блок внутри которого 4 таких скрытых div. Надо при нажатии на кнопку 1, показывать первый див, так же через fadeIn. При нажатии на кнопку 2, открытый должен уходить через fadeOut, и показываться второй блок. Я приблизительно знаю как такое реализовать, но для этого нужно создавать кучу доп классов и проверять их. Думаю есть решение куда легче, просто я его не знаю. Надеюсь на вашу помощь! 0

@sly444 5 / 5 / 3 Регистрация: 29.12.2010 Сообщений: 146
	09.03.2016, 03:16 [ТС]
	Lazy_Den, спасибо! Метод работает, однако есть одно НО. Если я два раза нажимаю на одну и ту же кнопку, тогда блок должен после первого нажатия показываться, а после второго исчезать. А у Вас выходит, что если блок любой хоть раз вызвал - то все, назад уже не заедет. Как это легче всего решить? А еще подскажите, пожалуйста, зачем используется on? Я всегда пишу просто $('div').click(function( . Без on. Разница есть? А то видел, некоторые пишут так, некоторые используют on. 0

@sly444 5 / 5 / 3 Регистрация: 29.12.2010 Сообщений: 146
	10.03.2016, 01:30 [ТС]
	Lazy_Den, Спасибо огромное! Все работает! Добавлено через 11 часов 30 минут Lazy_Den, Подскажите, пожалуйста, можно ли функции fadeToggle добавить анимацию slide? Нужно, чтобы блоки вылезали через slideUp, и уползали через slideDown. Можно ли эту анимацию как-то применить, используя fadeToggle? 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	10.03.2016, 08:55
	sly444, а чем slideToggle() не угодил? 1

Как правильно показывать один див и скрывать другой?

Решение