0

ここに同様の質問が投稿されているのを見ましたが、希望するアプローチに適した質問が見つからないようです。おそらく、jQueryに関する知識が最小限であることが原因です。

基本的にこれが当てはまります。10個のDIVSを含むページがあります。たとえば、＃page1から＃page10です。オーバーフローを非表示に設定して、最初のDIV、＃page1のみがビューポートに表示されるようにしました。クリック時に連続する次と前のDIVを表示する方法はありますか..どこかに「前」と「次」のリンクがあると言いますか？

編集

私の当初のアイデアは、DIVオーバーフローを非表示にして、DIVまでスクロールすることでしたが、@Steveによって提供されたソリューションが必要なものであることがわかりました。オーバーフロー隠しソリューションについては、@VisioNによってメソッドが説明されました。

4

3 に答える 3

1

最初にoverflow：hidden .....と言いましたが、実際にはVisibilily：hiddenまたはDisplay：noneを意味しますか？

displaynoneを使用して例を作成しました。

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 に答える