Lapok JavaScriptben
Most lapokat fogunk megvalósítani. Azonnal nézd meg a mintát, amire szükséged van:
Tanulmányozd azt a weblapelrendezést is, amin megoldjuk a feladatot:
<div id="parent">
<div class="menu">
<a href="" class="active">lap 1</a>
<a href="">lap 2</a>
<a href="">lap 3</a>
</div>
<div class="tabs">
<div class="tab active">
lap 1 szövege
</div>
<div class="tab">
lap 2 szövege
</div>
<div class="tab">
lap 3 szövege
</div>
</div>
</div>
#parent {
margin: 0 auto;
width: 400px;
}
.menu a {
margin-right: 5px;
display: inline-block;
padding: 10px;
color: black;
text-decoration: none;
border: 1px solid gray;
}
.menu a:hover {
background: #f8f8f8;
}
.menu a.active {
border-color: transparent;
background: #f2f2f2;
}
.tabs .tab:not(.active) {
display: none;
}
.tabs .tab {
padding: 10px;
background: #f2f2f2;
height: 300px;
}
Figyeld meg, hogy az aktív link
és az aktív lap rendelkezik a active osztállyal.
Megbeszélés
Most beszéljük meg, hogyan oldjuk meg ezt a feladatot. Nyilvánvaló, hogy valahogy össze kell kötni a linkeket a hozzájuk tartozó lapokkal. Ebben a leckében az elméleti tankönyvből már átvettük a lehetséges megoldásokat.
Ebben az esetben azt javaslom, hogy a linkeket és a lapokat egyszerűen pozíció alapján kössük össze: az első link nyissa meg az első lapot, a második link - a második lapot, és így tovább.
Az általános algoritmus így fog kinézni: egy kattintás után meg kell találnunk a linket az osztállyal és el kell távolítanunk belőle ezt az osztályt. Hasonló módon meg kell találnunk az ezzel az osztállyal rendelkező lapot és szintén el kell távolítanunk belőle ezt az osztályt.
Ezután vennünk kell azt a linket, amire kattintottunk és aktiválnunk kell. Ezután vennünk kell azt a lapot, amelyik ugyanazzal a számmal rendelkezik, mint a linkünk - és azt is aktiválnunk kell.
Másold le a megadott HTML és CSS kódokat. Valósítsd meg a lapokat a leírt algoritmus szerint.
