0

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

基本上是这样的。我有一个包含 10 个 DIVS 的页面，例如 #page1 到 #page10。我将溢出设置为隐藏，因此只有第一个 DIV，#page1 显示在视口上。有没有办法在点击时显示连续的下一个和上一个 DIV .. 说在某处有一个“上一个”和“下一个”链接？

编辑

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

4

3 回答 3

1

首先，您说溢出：隐藏.....您实际上是指可见性：隐藏还是显示：无？

我用 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;
}
​
于 2012-05-14T16:46:01.143 回答
0

您可以对这些 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);
});
于 2012-05-14T16:32:09.487 回答
0

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

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

演示：http: //jsfiddle.net/8D2jB/

于 2012-05-14T17:28:36.667 回答