在单个页面中堆叠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/