HTML 5 and CSS3 pure content switch - html

Question

i have following problem.
So i want to create a switch content on my Website.
I want to create that i can toggle with my navbar the content.
I dont have any Idea more...
This is my Code
<section class="content show" id="home">
<h1>Welcome</h1>
<h5>My new site is coming soon!</h5>
<p>ich werde diese Seite komplett neu aufbauen, ich hoffe das Ihnen meine neue Webpräsenz gefallen wird. <br><br> Mit freundlichen Grüßen, <br> <b> Alexander Constapel </b> </p>
<p>More info »</p>
</section>
<!-- /About Page -->
<section class="content hide" id="about">
<h1>About</h1>
<h5>Some facts about me!</h5>
<p>
<ul>
<li>Alexander Constapel </li>
<li>20.02.1994 </li>
<li>Ausbildung zum Mediengestalter in Digital und Print </li>
<li>Webdevelopment & Design </li>
</ul></p>
<p>Subscribe me on Facebook!</p>
</section>
<!-- /Contact Page -->
<section class="content hide" id="contact">
<h1>Contact</h1>
<h5>Get in touch!</h5>
<p>Email: Alook.de<br />
Phone: 05<br /></p>
<p>Jever<br />
Germany</p>
</section>
And this is my CSS to this:
.show {
display: block;
}
.hide {
opacity: 0;
}
.content {
color: deepskyblue;
float:left;
margin:40px;
position:absolute;
top:200px;
width:600px;
z-index:9999;
-webkit-font-smoothing:antialiased;
}
Ofc my NAV have href to #home #about #contact
But it still dont work.
Please help me out.
Thanks a lot.
Alex