Question

我想在点击特定区块时显示一些内容。我使用5个文本框，带有底层文本。

单击一个文本框时，它应显示基于该文本框的特定内容（文本块）。默认情况下，所有文本块都应默认隐藏，并且只有在单击特定文本框时才会显示。

我怎样才能做到这一点？

JSFiddle：https://jsfiddle.net/uknqqdga/1/

我使用此代码：

<div class="kernwaarden-circles">
   <div class="col-sm-1">
   </div>
   <div class="col-sm-2 text1">
      <p class="main-text text1">Text 1</p>
   </div>
   <div class="col-sm-2 text1">
      <p class="main-text text2">Text 2</p>
   </div>
   <div class="col-sm-2 text1">
      <p class="main-text text3">Text 3</p>
   </div>
   <div class="col-sm-2 text1">
      <p class="main-text text4">Text 4</p>
   </div>
   <div class="col-sm-2 text1">
      <p class="main-text text5">Text 5</p>
   </div>
   <div class="col-sm-1">
   </div>
</div>


<div class="text1-content" style="display: none;">
</div>
<div class="text2-content" style="display: none;">
</div>
<div class="text3-content" style="display: none;">
</div>
<div class="text4-content" style="display: none;">
</div>
<div class="text5-content" style="display: none;">
</div>

Answer 1

添加data atrribute以指示内容类。

<p class="main-text text1" data-content="text1-content">Text 1</p>

为所有内容提供额外的通用类content。

<div class="content text1-content" style="display: none;">

然后，隐藏所有content并显示data的相关内容： -

$('.main-text').click(function(){
    $('.content').hide();
    $('.' + $(this).data('content')).show();
});

Fiddle

修改

谢谢！在外部点击时是否也可以隐藏内容   div？所有内容都会被隐藏？我怎么能动画   显示内容？   是否可以在活动时添加活动类？

要制作动画，您可以执行大量不同的操作，slideDown / slideUp，fadeIn / fadeOut等。

点击外部，您需要在父click和div上设置content个活动。这也将删除活动类。

$('.kernwaarden-circles, .content').click(function(){ $('.content').slideUp(); $('.col-sm-2.text1').removeClass('active'); });

然后在标签页中点击，您需要stopPropagation，因此标签上的点击不会到达上方的隐藏点击。

$('.main-text').click(function(event){ $('.content').hide(); $('.col-sm-2.text1').removeClass('active'); $(this).parent().addClass('active'); $('.' + $(this).data('content')).slideDown(); event.stopPropagation(); });

在这里删除所有的活动，并添加到当前点击的标签的父级。

Fiddle

编辑2


大！作品完美！只有最后一点，它也可以动画，当一个   显示内容div并单击其他数据内容。   目前div已动画下滑。但它也可以动画   首先向上滑动，关闭旧内容div并向下滑动到   打开新的内容div？

$('.main-text').click(function(event){ var active = $('.col-sm-2.text1.active'); if(active.length){ var that = this; $('.' + active.find('.main-text').data('content')).slideUp(500, function(){ $('.' + $(that).data('content')).slideDown(500); }); } else{ $('.' + $(this).data('content')).slideDown(); } $('.col-sm-2.text1').removeClass('active'); $(this).parent().addClass('active'); event.stopPropagation(); });

Fiddle

编辑3


惊人!!最后一个问题，活动div也是可点击的，内容div是上下滑动的。是否可以禁用可点击的活动类？

您只需要检查父母是否已经拥有活动类。

$('.main-text').click(function(event){ event.stopPropagation(); if($(this).parent().hasClass('active')) return; var active = $('.col-sm-2.text1.active'); if(active.length){ var that = this; $('.' + active.find('.main-text').data('content')).slideUp(500, function(){ $('.' + $(that).data('content')).slideDown(500); }); } else{ $('.' + $(this).data('content')).slideDown(); } $('.col-sm-2.text1').removeClass('active'); $(this).parent().addClass('active'); });

Fiddle

编辑4


我希望活动div可以点击，但它会关闭。

if($(this).parent().hasClass('active')){ $('.col-sm-2.text1').removeClass('active'); $('.content').slideUp(); return; }

Fiddle

Answer 2

我能想到的最短的事情就是使用类名：

https://jsfiddle.net/uknqqdga/8/

$(function() {
    $(".main-text").click(function(e) {
        var contType=$(this).attr("class").split(" ")[1];
        // Hide others here, etc..
        $("."+contType+"-content").show();
    });
});

这有点像黑客并使用数据内容，因为在其他答案中更清洁。但这不需要修改HTML（有时你无法修改它）。

显示特定内容onclick

2 个答案: