Jak to zrobić ?

pytanie zadane 19 stycznia 2017 w HTML i CSS przez Michał Bartnik Początkujący (440 p.)

Witam mam problem. Chcę aby po naciśnięciu na któryś z napisów (O nas, Co robimy, Kontakt, Gdzie pracujemy) wyświetlił się właściwy tekst ale nie wiem jak to zrobić żeby zachował się wygląd strony i wszystko działało poprawnie mam skopiowany kod 4 razy i dalej nie wiem proszę o pomoc. Co muszę tam wstawić i gdzie ?

<!DOCTYPE HTML>

<html lang="pl"/>

 <meta charset="utf-8" />
 <title>Biuro rachunkowe Komplex  ! </title> 
 <meta name="description" content= "Biuro rachunkowe Komplex. Zapraszamy do współpracy ! " />
 <meta name="keywords" content= "Profesionalizm, Szybka obsługa, Wysoka jakość" />
 <meta http-equiv="X-UA-Compatible" content= "IE=edge,chrome=1" />
 
 <link rel="stylesheet" href="style.css"  type="text/css" />
 
 <head>
 
    <link href = "https://fonts.googleapis.com/css?family= Didact + Gothic " rel = "stylesheet">
 
 </head>
 <body>
 
    <div id="container" />
    
	<div id="logo"/>
           <h1>Komplex</h1>
	</div>
    <div id="nav" />
	
	       <div class="option"> O nas </div> 
		   <div class="option">Gdzie pracujemy ? </div>
		   <div class="option">Co robimy ? </div> 
		   <div class="option">Kontakt </div>
		 
	</div>
	<div id="content"/>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim dolor, tempor eget tempor in, mattis quis sapien. Aliquam neque urna, fringilla id semper in, sagittis quis dolor. Maecenas eget libero nunc. Suspendisse tristique lobortis nibh, quis blandit purus pharetra non. Donec lobortis venenatis sollicitudin. Aenean vel interdum velit. Integer euismod eleifend orci, at consequat odio suscipit nec. Ut faucibus ipsum nibh, quis ultrices risus vestibul efficitur. Pellentesque non odio dui. Nam pharetra purus ante, semper commodo mi venenatis et.
	</div>
	<div id="footer"/>
           Biuro rachunkowe Komplex © Wszelkie prawa zastrzeżone
    </div>
	</div>









		   
</body>
</html>

body
{
	background-color: #202020;
	color: #ffffff;
	font-family: 'Didact Gothic', sans-serif;
}
#container
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#logo
{
	margin-top: 20px;
	letter-spacing: 2px;
	padding: 20px;
	letter-spacing: 5px;
	background-color: #404040;
	text-align: center;
	font-size: 35px;
}
#nav
{
    background-color: #404040;	
	margin-top: 5px;
	padding: 10px;
	text-align: center;
}
.option
{
	float: left;
	min-width: 100px;
	height: 25px;
	font-size: 18px;
	padding: 10px;
	border-right: 2px dotted #ffffff;
}
.option:hover
{
	background-color: #505050;
	cursor: pointer;
}
#content
{
	padding: 40px;
	width: 920px;
	min-height: 380px;
	text-align: justify;
	background-color: #404040;
	margin-top: 5px;
}
#footer
{
	min-height: 20px;
	text-align: center;
	font-size: 20px;
	background-color: #404040;
	margin-top: 5px;
	padding: 20px;
}

https://scr.hu/8owd6K