javascript - 多个选择的链接并显示多个 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');
});

标记

<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()完成所需的行为。