Question

我有类似的东西，但现在我想同时展示多个div，例如。我选择了第1部分＆＃39;它显示了他的div，现在我点击了Div 2＆＃39;我希望保留“第1部分”和“第1部分”的内容。并显示＆＃39; Div 2＆＃39;。有人可以帮忙吗？

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

我认为这将完成工作：

$('#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值更好）：

<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 2

一种方法是使用另一个隐藏元素的类，然后单击删除隐藏该元素的类。这样当你拨打$('.hideClass').hide()时，它不会隐藏所有项目，只会隐藏其余未被点击的项目：

.hideClass{ display: hidden; }

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

Demo

Answer 3

你只想要一个简单的切换。通过修改你的例子，我就是这样做的：

<强> 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>

小提琴：https://jsfiddle.net/hescano/42uwvhx4/2/

请注意使用.toggleClass()和.toggle()来完成所需的行为。

多个选定的链接并显示多个div

3 个答案: