jquery - Html 内容面板滑入

Question

我希望创造一种类似于这里看到的效果

http://www.templatemonster.com/demo/42436.html

当按下导航栏上的按钮时，内容从左侧滑入并停留在中心，当按下另一个按钮时，新内容执行相同操作，旧内容框离开右侧。任何帮助将不胜感激，我尝试通过使用大滑块来完成此操作，但导航已关闭，因此任何建议都将是一个巨大的奖励！

Answer 1

一个可能的解决方案是使用 jQuery Plus Anchor 插件。

http://css-plus.com/2011/03/plusanchor-jquery-plugin/

Answer 2

以与菜单项相同的顺序创建菜单对应的 div，并为每个 div 赋予相同的类和 css 属性（宽度、高度、位置：绝对），然后使用以下代码：

$(document).ready(function(){
$('.active').css('left', ($(window).width() - $('.active').outerWidth())/2);  
$('li').click(function(){
var ind = $(this).index(),
    activeSlide = $('.active'),    
    slide = $('.slide').eq(ind);
    if(!slide.hasClass('active')){
   slide.stop().animate({'left': ($(window).width() - slide.outerWidth()) / 2}, 300);
        activeSlide.animate({'left': $(window).width()}, 300, function(){
            activeSlide.css('left', - activeSlide.outerWidth());
        });
        activeSlide.removeClass('active');
        slide.addClass('active');   
    }
});        
$(window).resize(function(){
    $('.active').css('left', ($(window).width() - $('.active').outerWidth()) / 2);
});                  
});

有关 HTML 结构和 CSS 属性的更多详细信息，请参见此处的DEMO ：