如何使用jQuery打开和关闭div

Question

Okay so I am looking at this website, http://codetunnel.net/ , and I saw that it only used one page, but jQuery was used to display different divs, therefore making it feel like a multipage website. I tried using the jQuery in my codepen, but it never worked. Can someone help me understand how the jQuery works, and how I can implement it into my own sites? The jQuery looks like this:

 $(function(){ $("#nav-home").click(function(){ $("#home").show(); $("#projects").hide(); $("#contact").hide(); $(".selected").removeClass("selected"); $("#nav-home").addClass("selected"); }); $("#nav-projects").click(function(){ $("#home").hide(); $("#projects").show(); $("#contact").hide(); $(".selected").removeClass("selected"); $("#nav-projects").addClass("selected"); }); $("#nav-contact").click(function(){ $("#home").hide(); $("#projects").hide(); $("#contact").show(); $(".selected").removeClass("selected"); $("#nav-contact").addClass("selected"); }); }); 

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

Answer 1

Actually, your code works. Unfortunately, the visible div is covered by the #nav. So the only thing you should do is add a "padding-top: 4em" style to the body.