如何使用jQuery切换div开关

Question

好吧，我在看这个网站http://codetunnel.net/，我看到它只使用了一页，但jQuery被用来显示不同的div，因此使它感觉像一个多页网站。我尝试在我的codepen中使用jQuery，但它从来没有工作。有人可以帮我了解 jQuery是如何工作的，以及如何将它实现到我自己的网站？ jQuery的是这样的：

$(function(){ 
 
$("#nav-home").click(function(){ 
 
\t $("#home").show(); 
 
\t $("#projects").hide(); 
 
\t $("#contact").hide(); 
 

 
\t $(".selected").removeClass("selected"); 
 

 
\t $("#nav-home").addClass("selected"); 
 
}); 
 

 
$("#nav-projects").click(function(){ 
 
\t $("#home").hide(); 
 
\t $("#projects").show(); 
 
\t $("#contact").hide(); 
 

 
\t $(".selected").removeClass("selected"); 
 

 
\t $("#nav-projects").addClass("selected"); 
 
}); 
 

 
$("#nav-contact").click(function(){ 
 
\t $("#home").hide(); 
 
\t $("#projects").hide(); 
 
\t $("#contact").show(); 
 

 
\t $(".selected").removeClass("selected"); 
 

 
\t $("#nav-contact").addClass("selected"); 
 
}); 
 
});

https://codepen.io/orchtechnerd/pen/dRzGZV //我codepen

Answer 1

其实，你的代码工作。 不幸的是，可见的div被#nav覆盖。因此，你应该做的唯一事情就是在身体上添加一个“填充顶部：4em”的样式。