2

我有一个带有四个按钮菜单栏的网页。每个按钮单击都会显示一个不同的 div。所有四个 div 都包含在同一个页面中（除了 index.html 之外，我不使用任何第二页）。我希望这些 div 之间的更改以
http://livedemo00.template-help.com/wt_39361/index.html#!/page_about
的方式 完成。我的方式是：绝对位置到任何 div 并应用

$('#content1').animate({ "left": "+=1500px" }, "slow" );

但是，结果不是我想要的，因为 content1 向右走，但水平滚动条仍然可见。我怎样才能以我想要的方式消失#content1 并同时出现#content2？
谢谢

4

1 回答 1

1

本质上，您需要一个视口。视口有一个overflow: hidden;属性，就是屏幕的宽度。视口绝对可以是您的body元素，但它不一定是 - 唯一的规定是正在移动的元素包含在其中。

你会触发你的移动功能，你的元素会移到屏幕的一侧，然后以同样的方式引入你的其他元素，然后在position: relative;动画之后将其设置为。像这样的东西：

var navClick = function() {
    $viewport = $('#viewport');
    $targetElem = $('#content' + $(this).data('target'));
    $active = $viewport.find('.active');
    $active.animate({'left': '-' + $active.width() + 'px'}, function() {
        $(this).removeClass('active');
    });
    $targetElem.animate({'left': '100px'}, function() {
        $(this).addClass('active');
    });
};

$(function() {
   $('nav span').on('click', navClick); 
});

检查它：小提琴

于 2013-09-18T21:37:03.020 回答