Несколько выбранных ссылок и показаны несколько div

Question

У меня есть что-то вроде этого, но теперь я хочу показать несколько div в то же время, например. Я выбрал «Div 1», и он показывает его div, теперь я нажимаю «Div 2», и я хочу оставаться в содержимом «Div 1» и показывать «Div 2». Может ли кто-нибудь помочь?

HTML

<div class="btn-group" role="group" aria-label=""> 
    <a id="showAll" class="btn btn-primary">Wszystkie elementy</a> 
    <a class="showSingle btn btn-primary" data-target="1">Div 1</a> 
    <a class="showSingle btn btn-primary" data-target="2">Div 2</a> 
    <a class="showSingle btn btn-primary" data-target="3">Div 3</a> 
    <a class="showSingle btn btn-primary" data-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> 

JQuery

$('.showSingle').click(function() { 
    $('.targetDiv').hide(); 

    $('#div' + $(this).attr('data-target')).show(); 
    $('.btn').removeClass('active'); 
    $(this).addClass('active'); 
}); 

https://jsfiddle.net/42uwvhx4/

Answer 1

Вы просто хотите простой переключатель. Изменяя свой пример, это как я достиг его:

JS

$('#showAll').click(function() { 
    $('.btn').addClass('active'); 
    $('.targetDiv').show(); 
    $(this).addClass('active'); 
}); 

$('.showSingle').click(function() { 
    $('#div' + $(this).attr('data-target')).toggle(); 
    $(this).toggleClass('active'); 
}); 

Markup

<div class="btn-group" role="group" aria-label=""> 
    <a id="showAll" class="btn btn-primary active">Wszystkie elementy</a> 
    <a class="showSingle btn btn-primary active" data-target="1">Div 1</a> 
    <a class="showSingle btn btn-primary active" data-target="2">Div 2</a> 
    <a class="showSingle btn btn-primary active" data-target="3">Div 3</a> 
    <a class="showSingle btn btn-primary active" data-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> 

Fiddle: https://jsfiddle.net/hescano/42uwvhx4/2/

Обратите внимание на использование .toggleClass() и .toggle(), чтобы выполнить Желаемое поведение.

Answer 2

Я думаю, что это будет делать работу:

$('#showAll').click(function() { 
$('.btn').removeClass('active'); 
$('.targetDiv').show(); 
$(this).addClass('active'); 
    }); 

    $('.showSingle').click(function() { 
    $('.targetDiv').hide(); 


    var targetHeight = $(this).attr('data-target'); 

    $(".targetDiv").each(function(){ 
    var height = $(this).attr('data-value'); 
    if(height <= targetHeight){ 
     $(this).show(); 
    } 


    }); 

    $('.btn').removeClass('active'); 
    $(this).addClass('active'); 
    }); 

с этим HTML изменения в целевых дивы: (Я думаю, что это лучший подход, чем разбор значений идентификаторов):

<div id="div1" class="targetDiv" data-value="1">Lorum Ipsum1</div> 
<div id="div2" class="targetDiv" data-value="2">Lorum Ipsum2</div> 
<div id="div3" class="targetDiv" data-value="3">Lorum Ipsum3</div> 
<div id="div4" class="targetDiv" data-value="4">Lorum Ipsum4</div> 

Answer 3

Один из способов заключается в использовании другого класса, который скрывает элементы, а затем по щелчку удалить класс который скрывает этот элемент. Таким образом, когда вы звоните $('.hideClass').hide() не будет скрывать все элементы, только оставшиеся не-щелкнул из них:

.hideClass{ display: hidden; } 

$('.showSingle').click(function() { 
    $('#div' + $(this).attr('data-target')).removeClass("hideClass"); 
    $('.hideClass').hide(); 
    ... 
}); 

Demo