Показать/скрыть несколько разделов с помощью JQuery

Ответ 1

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <a id="showall">All</a>
  <a class="showSingle" target="1">Div 1</a>
  <a class="showSingle" target="2">Div 2</a>
  <a class="showSingle" target="3">Div 3</a>
  <a class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

Ответ 2

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

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

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

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

Ответ 3

Назначьте каждый 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();
}

Ответ 4

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

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

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

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

Ответ 5

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

Пример:

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

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

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

Ответ 6

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

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();

});

Ответ 7

Просто небольшая заметка... Если вы используете это с другими скриптами, $в последней строке вызовет конфликт. Просто замените его на 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/

Ответ 8

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

Здесь 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>