Atveramas/aizveramas teksta sadaļas.


Šis apraksts ir paredzēts tikai kā vispārīgs apskats. Tas neaptver visu HTML un CSS iespēju uzskaitījumu. Šeit var būt iekļauti arī novecojoši piemēri un apgalvojumi.

Sākumlapa Iepriekšējā lappuse

Šajā piemērā tiek izmantota izvēles rūtiņa (checkbox), kas ir interaktīvs HTML elements. Šis piemērs izveidots paslēpjot pašu rūtiņu un pievienojot atbilstošu tekstu (label). Lai redzētu piemēru darbībā, uzklikšķini uz zemāk redzamiem sadaļu virsrakstiem. Nestrādā ar «Microsoft Internet Explorer», kuri vecāki par 10. versiju. Būtiski, lai visām komandām, kurām nepieciešama aizverošā komanda, tā būtu, piemēram, ja rindkopa sākas ar <P>, tai tai ir jābeidzas ar </P>.


Šo sadaļu jāvar parādīt un paslēpt.

Šajā lapā izmantotie stili:

/* Lai paslēptu ķeksējamo rūtiņu */ .sadalja { position: absolute; left: -800; } label{ cursor: pointer; } .sadalja + label { display: block; border-top: thin solid black; border-bottom: thin solid black; font-size: 140%; } .sadalja:checked + label { border-bottom: none; } .sadalja + label:before { content: url(/atteli/icons/folder.gif) " Atvērt "; } .sadalja:checked + label:before { content: url(/atteli/icons/folder.open.gif) " Aizvērt "; } .saturs, .kurasadalja, .kurasadaljaP { display: none; } .kurasadalja{ color: #FFFF88; background-color: #220099; padding: 3em; } #sadalja1:checked ~ #saturs1, #sadalja2:checked ~ #saturs2 { display: block; border-bottom: thin solid black; padding-bottom: 2em; }

Lapas prmkoda apskatei jāizmanto pūrlūka piedāvatie rīki. Šeit dot tikai neliela pirkoda daļa paraugam:

<input id='sadalja1' class='sadalja' type='checkbox' />
<label for='sadalja1'>lappusē izmantotos stilus

<div id="saturs1" class="saturs">
    <p>Šo sadaļu jāvar parādīt un paslēpt.</p>
</div>
    

Cieviet lapā var izmantot atsauci uz sadaļas ID.

<div id="saturs1" class="kurasadalja">[Stilu lapas saturs]

Pievērsiet uzmanību klašu (class) un id lietojumam. Ar klašu palīdzību tiek noteikts izskats. Savukārt ar id tiek panākta atšķirība starp dažādiem objektiem. Ja vairākiem objektiem tiek piešķirts viens un tas pats id, tie tiek uzskatīti par viena objekta dažādām daļām. Piemēram, atverot/aizverot sadaļas, mainās arī zemāk esošā teksta redzamība.

Ir ticis atvērts:

[Stilu lapas saturs]

Ir ticis atvērts:

[Lapas pirmkods]


Saturs Iepriekšējā lappuse Lappas saturs


priede.bf.lu.lv Bioloģijas fakultāte Datorklase Sākumlapa
Pamatlapa BF Padomi Sākums

Lappuse labota: 2026.08.18
Lapa ir publicēta ar    CC    BY–SA    4.0 licenci. Ja lapā ir ietvertas daļas uz kurām attiecas cita licence, tas norādīts atsevišķi lapas tekstā.