Javascript 在按钮上切换元素视图单击

我有不同的div，它们都有相同的类“textBox”

同时，应始终只显示一个框。对于大多数框，我的页面底部有一个按钮，可以单击并触发 使框可见并隐藏此时已显示的框

编辑：小提琴

为此，我有以下JS代码：

$( "#gettingStartedButton" ).click( function () {

        if (! $( "#gettingStarted" ).is( ":visible" ) ) {
            if ( $( "#extension" ).is( ":visible" ) ) {
                $( "#extension" ).fadeOut( function () {
                    $( "#gettingStarted" ).fadeIn();
                });
            }
            else if ( $( "#executingBox" ).is( ":visible" ) ) {
                $( "#executingBox" ).fadeOut( function () {
                    $( "#gettingStarted" ).fadeIn();
                });
            }
            else if ( $( "#feedback" ).is( ":visible" ) ) {
                $( "#feedback" ).fadeOut( function () {
                    $( "#gettingStarted" ).fadeIn();
                });
            }
            else if ( $( "#impressum" ).is( ":visible" ) ) {
                $( "#impressum" ).fadeOut( function () {
                    $( "#gettingStarted" ).fadeIn();
                });
            }
            else if ( $( "#registration" ).is( ":visible" ) ) {
                $( "#registration" ).fadeOut( function () {
                    $( "#gettingStarted" ).fadeIn();
                });
            }
        }
        else {
            $( "#gettingStarted" ).fadeOut( function () {
                $( "#executingBox" ).fadeIn();
            });
        }
    });

div框如下所示：

<div id="gettingStarted" class="textBox">
test blabla
</div>

<div id="feedback" class="textBox">
test blabla
</div>

<div id="registration" class="textBox">
test blabla
</div>

<div id="impressum" class="textBox">
test blabla
</div>

此代码检查框是否已显示，如果是，则每隔一个框检查一次，以获得可见框，然后淡出，然后淡入参照框

我的问题是，我需要每个框的这部分代码。我认为应该有更好的方法来实现这一点

我正在搜索的是一种openBox（id）方法，在这种方法中，我将框的id作为参数，它会自动检测具有类参数的所有其他框，并检测哪些框已淡入，然后淡出，以淡入具有id的框

遗憾的是，我的javascript技能不太好，因此我寻求一些建议或示例来实现这一点

非常感谢您给我的每一个意见。

var$textBox=$（“.textBox”）；//把他们都抓起来！
$textBox.eq（0.fadeIn（）；//法登第一
$（“[data showid]”）。在（“单击”上，函数（）{//按钮单击（使用数据-*属性！）
var$box=$（“#”+this.dataset.showid）；//获取目标box ID元素
$textBox.not（$box.hide（）；//隐藏所有机器人程序目标
$box.stop（）.fadeToggle（）；//fadeToggle目标框
});
.textBox{display:none；}

开始布拉布拉
反馈布拉布拉
布拉布拉印模
GS
食品饮料
Imp
，在按钮上添加一个
数据-*
属性，将其链接到其内容：

<button id="gettingStartedButton" data-link="gettingStarted">GS</button>
<button id="feedbackButton" data-link="feedback">FB</button>
<button id="impressumButton" data-link="impressum">Imp</button>

更新的小提琴：
我是用class来做的。HTML将类似于：


1测试bla
2试验叶片
3试验叶片
4 test blabla
我们需要您的HTML结构来有效地回答此问题。无法理解您试图实现的目标。你也可以在代码片段或中复制类似的演示吗？@divy3993给我一点时间，我尝试构建一个。@divy3993和Atula：请查看我的编辑和小提琴链接。如果你快速点击按钮，你会得到一个非常奇怪的结果result@RokoC.Buljan不要快速点击按钮！不知何故，如果我点击一个按钮，新框就会在另一个框消失之前消失。当再次单击按钮时，如果框会淡出，那就太棒了。@progNewbie-这是您现有代码的直接端口，此版本中存在的任何问题都会存在于您当前的版本中。@Jamiec：遗憾的是没有。我把两把小提琴都打开了。在我的车上，它运转良好。“你的不是。”这位新手在我的回答中补充道。因此，只需使用
.fadeToggle（）
而不是
.fadeIn（）
<button id="gettingStartedButton" data-link="gettingStarted">GS</button>
<button id="feedbackButton" data-link="feedback">FB</button>
<button id="impressumButton" data-link="impressum">Imp</button>

$( "#gettingStarted" ).fadeIn();

$('button').click(function(){
    var link = $(this).data('link');
    $('.textBox:visible').fadeOut(function(){
                    $('#' + link).fadeIn()
                });
})