在单个页面中堆叠div并在它们之间移动
问题描述:
此图形大致表示我正在尝试执行的操作。左上方的第二个矩形表示视口。这意味着每个div应该覆盖整个视口,其他三个视口都不应该可见。在单个页面中堆叠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
答
这里是工作提琴你是在谈论:
我用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内具有溢出的隐藏,然后风格它显示:内联;