在單個頁面中堆疊div並在它們之間移動

Question

此圖形大致表示我正在嘗試執行的操作。左上方的第二個矩形表示視口。這意味着每個div應該覆蓋整個視口，其他三個視口都不應該可見。

所以我用這個CSS：

body {overflow : hidden;} 

#page {width:200%; 
     position : absolute;} 

#page div {width: 50%; 
     position:relative; 
     height: 100%;} 

接下來，我把錨標籤的div，以便它們之間進行瀏覽。但它不起作用。我到了第二個div，但我不能去任何其他的div。我知道這可以通過jQuery解決，但我想用純HTML和CSS來做到這一點，只使用jquery來爲過渡設置動畫。

我該怎麼做？

這裏是JSFIDDLE

Answer 1

這裏是工作提琴你是在談論：

http://jsfiddle.net/X4URc/3/

我用HTML：

<div class='container'> 
    <div class='navbar'> 
     <div align='center'> <a class='menu1 menu-item'>Item 1</a> 
<a class='menu2 menu-item'>Item 2</a> 
<a class='menu3 menu-item'>Item 3</a> 
<a class='menu4 menu-item'>Item 4</a> 

     </div> 
    </div> 
    <div class='content'> 
     <ul class='content-container'> 
      <li class='contents content1'>Content 1</li> 
      <li class='contents content2'>Content 2</li> 
      <li class='contents content3'>Content 3</li> 
      <li class='contents content4'>Content 4</li> 
     </ul> 
    </div> 
</div> 

CSS：

.menu-item { 
    background: black; 
    color: white; 
    padding: 15px; 
    cursor: pointer; 
} 
.menu-item:hover { 
    background: white; 
    color: black; 
} 
.menu-item:not(.menu1) { 
    margin-left: -8px; 
} 
.navbar { 
    background: black; 
    padding: 15px; 
    width: 700px; 
} 
.container { 
    background: white; 
    width: 730px; 
    margin: 0 auto; 
} 
.content1 { 
    margin-left: -40px; 
} 
.contents { 
    padding-bottom: 400px; 
    padding-right: 668px; 
    height: 500px; 
    background: red; 
    list-style-type: none; 
    display: inline; 
} 
.contents:not(.content1) { 
    margin-left: -4px; 
} 
body { 
    background: #ccc; 
} 
.content { 
    width: 730px; 
    background: white; 
    overflow: hidden; 
} 
.content-container { 
    width: 9999999px; 
    height: 500px; 
} 

Jquery的：

$('.menu1').click(function(){ 
    $('.content1').css({'margin-left' : '-40px'}); 
}); 
$('.menu2').click(function(){ 
    $('.content1').css({'margin-left' : '-770px'}); 
}); 
$('.menu3').click(function(){ 
    $('.content1').css({'margin-left' : '-1500px'}); 
}); 
$('.menu4').click(function(){ 
    $('.content1').css({'margin-left' : '-2230px'}); 
}); 
// for more add -730px every time 
//If you don't want animations change .animate() to .css() 

代替具有大量的div的，我使用的一個div內具有溢出的隱藏，然後風格它顯示：內聯;

Answer 2

一個很好的方法可能是ScrollTo http://flesler.com/jquery/scrollTo/