Показать переполнение: скрытые DIVS при нажатии

Question

Я видел похожие вопросы, размещенные здесь, но я не могу найти подходящий для моего желаемого подхода. Вероятно, у меня есть минимальные знания по jQuery.

В основном это так. У меня есть страница, содержащая 10 DIVS, например # page1 to # page10. Я установил переполнение в скрытое, поэтому в окне просмотра отображается только первый DIV, # page1. Есть ли способ показать последовательный следующий и предыдущий DIV при щелчке .. скажите, что у вас есть «предыдущая» и «следующая» ссылка?

редактировать

Моя первоначальная идея состояла в том, чтобы иметь переполнение DIV скрытые и выделите DIV, но обнаружил, что решение дается @Steve является то, что мне было нужно. Для переполнения скрытого решения метод был объяснен @VisioN.

Answer 1

Во-первых, вы сказали переполнения: скрытый ..... ли вы на самом деле означает Visibilily: нет скрытых или Дисплей: нет?

Я сделал пример, используя дисплей нет.

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

ли в настоящее время не обрабатывает при нажатии кнопки «Следующий» на уже последний ДИВ, но вы можете либо скрыть следующую ссылку или сделать его достаточно умна, чтобы не скрыть последний 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/