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;