css - div 之间的内部链接未按预期工作

Question

我正在尝试创建一个只有一个实际页面的网站，其中包含多个 div 形式的伪页面。有四个 div，我已将 div 的包装宽度设置为 200%(以便我得到两行，每行两个 div)并将 div 设置为 50% 宽度(以便它们覆盖整个页面视口(viewport))。

我有四个名为 home 的 div，like、dislike 和 contact。我首先创建了一个指向类似 div 的标签链接并且它起作用了。但是没有其他 div 的标签链接有效，并且每次都只显示第二页。

这是 jsfiddle:JsFiddle of my site

我做错了什么？

CSS:

#wrapper { max-width : 100%;
       overflow : hidden;
       position : relative; 
     }

#header { position : fixed;
    float : left;

    }

#logo { margin-left: 0px;
    padding-top: 20px;
    height: 50px;
    width: 300px;
    border : solid black;
background-color: red;
    }

#nav   {margin-top : 20px;
    width : 50%;
    height: 300px;  
    border : solid black;

}


#pages {  width: 200%;
      position : relative;
    border : solid black;
    float: left;
    height : 800px;
    }
#main-page, #like-page, #dislike-page, #contact-page {float:left;
position : relative;
width:50%;
height: 800px;}

div.content { margin-top: 100px;
}

div H2 {margin-left: 180px;
        margin-bottom: 20px;

}

div p {margin-left: 180px;
    margin-right: 50px;
}

Answer 1

这是关于您正在谈论的内容的工作 fiddle :

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;
}

J查询:

$('.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，而是使用了 <ul>在 overflow hidden 的 div 中，然后对其进行样式设置 display: inline;