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

查询：

$('.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 中使用了一个隐藏溢出的 div，然后将其设置为 display: inline;

Answer 2

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