Question

我在这里发布了类似的问题，但我似乎找不到合适的方法。可能是因为我对jQuery知之甚少。

基本上就是这种情况。我有一个包含10个DIVS的页面，比如＃page1到＃page10。我将overflow设置为hidden，因此只有第一个DIV，＃page1显示在视口上。有没有办法在点击时显示连续的下一个和上一个DIV ..说在某处有“上一个”和“下一个”链接？

修改的

我最初的想法是隐藏DIV溢出并滚动到DIV，但发现@Steve给出的解决方案是我需要的。对于溢出隐藏解决方案，@ VisioN解释了一种方法。

Answer 1

首先你说溢出：隐藏.....你的意思是Visibilily：隐藏还是显示：没有？

我使用display none做了一个例子。

http://jsfiddle.net/4HpXz/4/

当你在最后一个div上单击“下一步”时当前没有处理，但你可以隐藏下一个链接或使其足够聪明，如果你点击下一个就不能隐藏最后一个div

JS

$(function(){

    $('.next').click(function(){
        $('.page.show')
            .removeClass('show')
            .next()
            .addClass('show');   
    });

    $('.prev').click(function(){
        $('.page.show')
            .removeClass('show')
            .prev()
            .addClass('show');   
    });

});

HTML

<div class="page show">Page1</div>
<div class="page">Page2</div>
<div class="page">Page3</div>
<div class="page">Page4</div>
<div class="page">Page5</div>
<div class="page">Page6</div>
<div class="page">Page7</div>
<div class="page">Page8</div>
<div class="page">Page9</div>
<div class="page">Page10</div>

CSS

.page{
    display: none;
}
.show{
    display: block;
}

Answer 2

您可以对这些div进行幻灯片效果。

例如：

var firstpage = $('#container div#page1'), 
      pgwidth = firstpage.outerWidth();

$('.prevButton').on('click', function() {
  firstpage.animate({
     'margin-left' : '-=' + pgwidth + 'px' // sliding the first div amount of its outerWidth to left
  },300);
});


$('.prevButton').on('click', function() {
  firstpage.animate({
     'margin-left' : '+=' + pgwidth + 'px' // sliding the first div amount of its outerWidth to right
  },300);
});

Answer 3

好吧，如果我理解正确，你需要看一下scrollIntoView()方法。

当您从标题中获取时，它会将元素滚动到视图中。它非常基础，即使是IE6也支持。

DEMO： http://jsfiddle.net/8D2jB/

显示溢出：点击隐藏DIVS

3 个答案: