Скрыть или показать панель с помощью javascript или jquery [duplicate]

Назначьте каждый div a class. Затем вы можете выполнять действия над всеми из них:

$(".divClass").hide();

Таким образом, каждая кнопка может делать:

$(".divClass").hide()
$("#specificDiv").show();

Вы можете сделать это более общим и использовать очевидное соглашение - и div с одинаковым номером в id связаны. Итак:

$(".button").click(function() {
  var divId = "#div" + $(this).attr("id").replace("showdiv", "");
  $(".divClass").hide(); 
  $(divId).show();
}

Если они попадут в логические группы, я, вероятно, поеду с подходом класса , уже указанным здесь .

Многие люди, похоже, забывают, что вы действительно можете выбрать несколько элементов по id в одном и том же селекторе jQuery:

$("#div1, #div2, #div3").show();

Где 'div1', 'div2' и «div3» - все атрибуты id в разных div, которые вы хотите показать сразу.

Просто небольшая заметка ... Если вы используете это с другими скриптами, $ на последней строке вызовет конфликт. Просто замените его на jQuery, и вы хорошо.

jQuery(function(){
     jQuery('#showall').click(function(){
           jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+jQuery(this).attr('target')).show();
    });
});

http://jsfiddle.net/XwN2L/4764/

простой, но глупый подход:

$('#showall').click(function(){
    $('div[id^=div]').show();
});

$('#showdiv1').click(function(){
    $('#div1').show();
    $('div[id^=div]').not('#div1').show();
});

как для лучшего - добавьте общий класс ко всем div и используйте некоторый атрибут в кнопках с идентификатором целевых divs

У меня была такая же проблема, прочитав это сообщение, но закончил создание этого решения, которое динамически выбирает divs, выбирая идентификатор из пользовательского класса в href с помощью функции attr() JQuery.

Вот JQuery:

$('a.custom_class').click(function(e) {
  var div = $(this).attr('href');
  $(div).toggle('fast');
  e.preventDefault();
}

И вам просто нужно создать ссылку, подобную этой, а затем в HTML:

<a href="#" class="#1">Link Text</a>
<div id="1">Div Content</div>

Проверить этот Пример

Html:

<div class="buttons">
<a class="button" id="showall">All</a>
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

Javascript:

$('#showall').click(function(){
    $('div').show();
});

$('#showdiv1').click(function(){
    $('div[id^=div]').hide();
    $('#div1').show();
});
$('#showdiv2').click(function(){
    $('div[id^=div]').hide();
    $('#div2').show();
});

$('#showdiv3').click(function(){
    $('div[id^=div]').hide();
    $('#div3').show();
});

$('#showdiv4').click(function(){
    $('div[id^=div]').hide();
    $('#div4').show();

});

Если вы хотите, чтобы показать / скрыть особые divs и / или группы divs с меньшим количеством кода, просто примените к ним несколько классов, чтобы вставить их в группы, если это необходимо.

Пример:

.group1 {}
.group2 {}
.group3 {}

<div class="group3"></div>
<div class="group1 group2"></div>
<div class="group1 group3 group2"></div>

Тогда вам просто нужно использовать идентификатор, чтобы связать действие с целевым, и с 5,6 строками кода jquery у вас есть все, что вам нужно.