Proiectarea, dezvoltarea și promovarea site-urilor din Gomel - cum pentru a selecta elementul de meniu activ

dezvoltare Forum → Articole → Web → Pentru a selecta elementul de meniu activ

Elementul de meniu activ atunci când acesta devine propisaniem el orice clasă și alocarea acestei clase în CSS.

Să examinăm acum modul de a face acest lucru cu un exemplu.

În CSS, vom seta stiluri de meniu și gradienți. Și întrebați gradientul de meniu activ la fel ca toată lumea, dar în direcția opusă.
De exemplu, - întregul gradientul de meniu merge de la lumină la partea de sus la partea de jos a ferestrei, iar în meniul activ din contra. oportunități CSS3 ne va ajuta în această:

Acum trebuie să „stea“ din meniul activ folosind JavaScript.
Aceasta este, setați clasa „activă“ link-ul curent.

Pasul unu - creați o caracteristică evidențiată. Să-l numim pe fiecare meniu. Atâta timp cât avem unul, dar atunci nu vor fi mulți - și apoi trebuie să adăugați o linie.

Introduceți codul funcției site-ul său că a fost deja definit în documentul înainte de a fi încărcat.

Acum trebuie să-i spunem la sfârșitul documentului, acesta este cel mai bine înainte de închidere , pentru a evidenția toate link-urile din id = „meniu“ *

* În partea de jos a codului paginii este chemat apoi la pagina complet încărcată în momentul funcționării sale.

După cum puteți vedea, chiar și fără a folosi jQuery JavaScript în nativ - este simplu.

Dar dacă v-ați conectat la pagina jQuery, este încă mai ușor.
Puteți face chiar și fără o funcție, iar codul de mai simplă și directă:

Utilizarea jQuery oferă chiar și avantajul de a scrie acest cod poate fi oriunde (nu in fata ) - funcționează oricum numai după încărcarea întregii pagini.

Ei bine, conform tradiției - în rezultatul final:


Cu JavaScript dezactivat iluminare din spate link-ul activ nu se va vedea.
Toate pentru a fi sincer

Rămâne să adaug că acest cod doar pare complicat, din cauza faptului că am adăugat la gradienții de meniu folosind CSS. Și astfel meniul poate fi iluminate mult mai ușor. Aloca exemplu folosind bold font-weight: bold. Sau setați fundal de imagini diferite - așa cum doriți.