javascript - 显示特定内容onclick

Question

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

当点击一个文本框时，它应该显示基于该文本框的特定内容(文本 block )。默认情况下，所有文本 block 都应默认隐藏，只有在单击特定文本框时才会显示。

我怎样才能做到这一点？

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 属性来指示内容类。

<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

编辑

Thanks! Is it also possible to hide the content when clicking outside the div? So that all content will hidden? And how can I animate the display of the content? And is it possible to add a active class to the when it is active?

要制作动画，您可以做很多不同的事情，slideDown/slideUp，fadeIn/fadeOut 等

在外部单击，您需要在父级 div 和 content 上有一个 click 事件。这也将删除 active 类。

$('.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

Great! Works perfect! Only last point, can it also be animated, when a content div is displayed and clicking on another data-content. Currently the div is animated to slide down. But can it also animated to first slide up, to close the old content div and the slide down to open the new content 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

Amazing!! Last question, the active div is also clickable and the the content div is slide up and down. Is it possible to disable the active class to be clickable?

您只需要检查父级是否已有事件类。

$('.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

I want the active div to be clickable, but that it will close.

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

Fiddle