divs之间的内部链接不能按预期工作

Question

我想创建一个网站，只有一个实际页面包含divs窗体中的多个伪页面。有四个div，我已经设置了div的宽度为200％（这样我就可以得到两行两个div），并将div设置为50％的宽度（以便它们覆盖整个页面视口）。

我有四个div命名为home，喜欢，不喜欢和联系。我首先创建了一个标签链接到类似的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

这里是工作提琴你是在谈论：

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的，我用了一个<ul>一个div内具有溢出的隐藏，然后称呼它display: inline;