Question

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

我已根据所选链接创建了多个div来动画显示位置。单击主页时，徽标应从右侧滑入。点击＆＃39; Vision＆＃39; （另一个菜单选项）另一个div应该滑入，它会做什么。但是，点击“愿景”后，菜单选项，＆＃39; Home＆＃39;包含徽标的div不会滑出。

我之前曾设法做过这件事，但我无法弄明白。

以下是工作示例：

http://www.visiondigit.al

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

http://jsfiddle.net/9jzXM/

这是我的代码的一部分，我已经缩小并尝试搞乱

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

如果有人可以帮助我，那就太棒了。谢谢！

Answer 1

我迷失在你的代码中......我确实让你使用CSS过渡动画和JQuery触发类更加简单。它只是一个shell，但你可以根据自己的需要进行构建。

JSFiddle

HTML

<ul>
    <li id="first" class="toggles">First</li>
    <li id="second" class="toggles">Second</li>
</ul>
<div id="first-slide" class="panes"></div>
<div id="second-slide" class="panes"></div>

CSS

#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 */
}

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

    });
});

一旦选择了另一个div，如何使活动div移动？

1 个答案: