Спасибо!<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
background-color: #7C2DCB;
}
h1 {
padding: 1em;
}
h1 {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<h1 style="font-size:32px; color:white;">Lampulan Ringette ry</h1>
<ul>
<li><a class="active" href="#etusivu">Etusivu</a></li>
<li><a href="#ryhmät">Ryhmät</a></li>
<li><a href="#yhteystiedot">Yhteystiedot</a></li>
</ul>
<h2 style="font-size:24px;">Turvallinen harrastus oman kylän lapsille ja nuorille!</h2>
<p>Lampulan Ringette tarjoaa lapsille ja nuorille mahdollisuuden
harrastaa urheilua turvallisessa ympäristössä. Yhdistyksen toiminnan
pääpaino on lasten ja nuorten liikuntaharrastuksen mahdollistamisessa.
Tarjoamme myös mahdollisuuden osallistua erilaisiin peleihin ja
turnauksiin.</p>
<p>Ringette on kaiken ikäisille soveltuva taitolaji, jossa näppäryys korvaa
voiman. Se on turvallinen laji, sillä vartalolla tapahtuvat rajut kontaktit
ovat kiellettyjä. Suomessa on tällä hetkellä tuhansia lajin harrastajia,
mukaan mahtuu aina uusia lajista kiinnostuneita.</p>
</body>
</html>
<html>
<style>
nav{
display:flex;
width: 100%;
}
nav div{
width: 100%;
text-align: center;}
</style>
<nav>
<div id="tab1">a</div>
<div id="tab2">b</div>
<div id="tab3">c</div>
</nav>
<div>
<div id = 'ctx1'>ctx1</div>
<div id = 'ctx2' style="display: none;">ctx2</div>
<div id = 'ctx3' style="display: none;">ctx3</div>
</div>
<script>
function tab1Ev(e){
ctx1.style.display = ""
ctx2.style.display = "none"
ctx3.style.display = "none"
}
function tab2Ev(e){
ctx1.style.display = "none"
ctx2.style.display = ""
ctx3.style.display = "none"
}
function tab3Ev(e){
ctx1.style.display = "none"
ctx2.style.display = "none"
ctx3.style.display = ""
}
var tab1, tab2, tab3,ctx1,ctx2,ctx3;
tab1 = document.getElementById('tab1')
tab2 = document.getElementById('tab2')
tab3 = document.getElementById('tab3')
ctx1 = document.getElementById('ctx1')
ctx2 = document.getElementById('ctx2')
ctx3 = document.getElementById('ctx3')
tab1.addEventListener("click", tab1Ev, false);
tab2.addEventListener("click", tab2Ev, false);
tab3.addEventListener("click", tab3Ev, false);
</script>