Bootstrap 4 使用引导折叠三列

我正试图使三个标签与交叉引用一个标签可见的时间。我使用的是引导v4折叠方案，其功能由jQuery支持。以下是一个例子：

$（文档）.ready（函数（）{
$（“#Tab2_t1”）。单击（函数（）{
$（'#t1'）。折叠（'hide'）；
$（'#t1'）.on（'hidden.bs.collapse'，function（）{
$（'#t2'）。折叠（'show'）；
});
})
$（“#Tab3_t1”）。单击（函数（）{
$（'#t1'）。折叠（'hide'）；
$（'#t1'）.on（'hidden.bs.collapse'，function（）{
$（'t3'）。折叠（'show'）；
});
})
$（“#Tab1_t2”）。单击（函数（）{
$（'#t2'）。折叠（'hide'）；
$（'#t2'）.on（'hidden.bs.collapse'，function（）{
$（'#t1'）。折叠（'show'）；
});
})
$（“#选项卡3_t2”）。单击（函数（）{
$（'#t2'）。折叠（'hide'）；
$（'#t2'）.on（'hidden.bs.collapse'，function（）{
$（'t3'）。折叠（'show'）；
});
})
$（“#选项卡1_t3”）。单击（函数（）{
$（'t3'）。折叠（'hide'）；
$（'#t3'）.on（'hidden.bs.collapse'，function（）{
$（'#t1'）。折叠（'show'）；
});
})
$（“#选项卡2_t3”）。单击（函数（）{
$（'t3'）。折叠（'hide'）；
$（'#t3'）.on（'hidden.bs.collapse'，function（）{
$（'#t2'）。折叠（'show'）；
});
})
});
只需隐藏
。折叠
并在单击功能上显示选项卡id：

$(document).ready(function() {

  $("#Tab2_t1").click(function() {
        $('.collapse').collapse('hide');
        $('#t2').collapse('show');
    })

  $("#Tab3_t1").click(function() {
        $('.collapse').collapse('hide');
        $('#t3').collapse('show');
    })

  $("#Tab1_t2").click(function() {
        $('.collapse').collapse('hide');
        $('#t1').collapse('show');
    })

  $("#Tab3_t2").click(function() {
        $('.collapse').collapse('hide');
        $('#t3').collapse('show');
    })

  $("#Tab1_t3").click(function() {
        $('.collapse').collapse('hide');
        $('#t1').collapse('show');
    })

  $("#Tab2_t3").click(function() {
        $('.collapse').collapse('hide');
        $('#t2').collapse('show');
    })
});

这是小提琴：
谢谢你，马罗！虽然它按预期工作，但在显示新选项卡之前，它不会产生卷起选项卡的效果。重点是，在我的例子中，我想保持标签在点击时上下滚动的印象。哦，好的。我为你做了一把小提琴。代码的问题在于，当您调用选项卡上的
折叠（'show'）
时，不会将其隐藏起来。希望我帮助过你：）