Сокрытие и отображение блоков js или jQuery

Рейтинг: 0Ответов: 2Опубликовано: 21.11.2014

Всем привет! Часто возникает ситуация, когда есть несколько блоков, и при клике на один из них его надо как-то активировать, а остальные деактивировать.

Я обычно делаю топорно, типа так

switch (block) {
    case 'block-1':
        $('.block-1').addClass('active');
        $('.block-2').removeClass('active');
        $('.block-3').removeClass('active');
        break;
    case 'block-2':
        $('.block-1').removeClass('active');
        $('.block-2').addClass('active');
        $('.block-3').removeClass('active');
        break;
    case 'block-3':
        $('.block-1').removeClass('active');
        $('.block-2').removeClass('active');
        $('.block-3').addClass('active');
        break;
   }

Полагаю, что есть более изящный способ. Подскажите, пожалуйста.

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Как вариант назначить класс block всем элементам и по клику у всех контейнеров с этим классом удалять класс active, а к this его присваивать. Что-то вроде этого

$(".block").click(function(){
$(".block").each(function(){ $(this).removeClass("active"); });
$(this).addClass("active");
});

собственно вот пример http://jsfiddle.net/eLmcxtyw/2/

▲ 1

Можно сделать так:

HTML:

<div class="block1 active">test1</div>
<div class="block2">test2</div>
<div class="block3">test3</div>

JS:

$(function() {
    $('div').click(function() {
        $('.block1,.block2,.block3').removeClass('active');
        $(this).addClass('active');
    });
});

jsFiddle: http://jsfiddle.net/Barton89/eLmcxtyw/1/