Javascript 选择另一个div后，如何使活动div移动？

首先，我不是一个经验丰富的程序员。我主要是修改代码并将其拼凑在一起，所以这就是我被卡住的地方

我已经创建了多个div，以便根据选定的链接设置动画。单击“主页”时，徽标应从右侧滑入。当您单击“Vision”（另一个菜单选项）时，另一个div应该滑入，它确实会滑入。但是，单击“Vision”菜单选项后，包含徽标的“Home”div不会滑出

我以前设法做到了这一点，但我不知道怎么做

以下是工作示例：

这是我目前的项目，我的目标是做同样的过程。我目前有一个随机链接的iFrame嵌入，但它可以用于测试

这是我的代码的一部分，我已经缩小了范围，并试图胡乱处理

    jQuery(function($){
$('.fTab').on('click', function(){
    $(this).toggleClass('active');
    });
    })

---

如果有人能帮我，那就太棒了。谢谢

我在你的代码中迷路了。。。我确实使用CSS动画转换和JQuery触发类，使您的操作简单得多。它只是一个外壳，但你可以根据自己的意愿在上面构建

HTML

JQuery

$(document).ready(function(){
    $('.toggles').click(function(){

        $('.panes').css('right', '-9999px'); // hide all tabs

        var elementID = $(this).attr('id'); // get the ID of the clicked element

        $('#'+elementID+'-slide').css('right', '0'); // show the desired element

    });
});

#first-slide {
    width: 500px;
    height: 200px;
    background: red;
    position: absolute;
    right: -9999px; /* get element out of viewport */
    transition: 0.5s ease;
}
#second-slide {
    width: 500px;
    height: 200px;
    background: green;
    position: absolute;
    right: -9999px; /* get element out of viewport */
    transition: 0.5s ease;
}
body {
    overflow: hidden; /* important to remove that side scroller */
}

$(document).ready(function(){
    $('.toggles').click(function(){

        $('.panes').css('right', '-9999px'); // hide all tabs

        var elementID = $(this).attr('id'); // get the ID of the clicked element

        $('#'+elementID+'-slide').css('right', '0'); // show the desired element

    });
});