Atrisināts: %2B mainīt maršrutētāja saites aktīvo klasi

Pēdējā atjaunošana: 09/21/2023
Autors: JavaScript SourceTrail

Protams, sāksim ar šo rakstu “Mainīt maršrutētāja saites aktīvo klasi JavaScript”.

Tīmekļa izstrādes jomā, jo īpaši, strādājot ar vienas lapas lietojumprogrammām (SPA), ļoti svarīga ir spēja dinamiski precīzi manipulēt ar navigāciju un izkārtojumu. Viens no konkrētiem aspektiem ir Active Router Link klases mainīšana, izmantojot JavaScript, tādējādi mēs kontrolējam klasi(-es), kas tiek lietota saitei, ja tā korelē ar mūsu lietojumprogrammā pašlaik aktīvo maršrutu.

Tagad par šī rezolūciju:

Problēma rodas, ja vēlamies, lai pašlaik skatītās lapas maršrutētāja saite tiktu parādīta citādi, kas var ietvert krāsas, fonta lieluma maiņu utt. Risinājums ir JavaScript spējā dinamiski mainīt CSS klases un tajās esošos atribūtus. Koda sadaļā tas tiks sīkāk aprakstīts.

Kodeksa skaidrošana

Lai sāktu, apskatīsim kodu un sapratīsim, kā tas manipulē ar aktīvo maršrutētāja saites klasi, izmantojot JavaScript.

Šim uzdevumam mēs varam izmantot JavaScript un CSS piedāvātās metodes:

  const links = document.querySelectorAll('.nav-link');
  links.forEach((link) => {
    link.addEventListener('click', function() {
      links.forEach((lnk) => lnk.classList.remove('active'));
      this.classList.add('active');
    });
  });

Šis skripts atlasa visus elementus ar klases nosaukumu 'nav-link', izpētot tos, lai klikšķa notikumam pievienotu notikumu uztvērēju. Ja tiek noklikšķināts uz saites, “aktīvā” klase tiek noņemta no visām saitēm un pēc tam pievienota saitei, uz kuras noklikšķināta.

Izpratne par JavaScript galvenajām funkcijām

Šis koda fragments ir būtisks, lai izprastu, kā mēs esam manipulējuši ar maršrutētāja saiti, un ietver galvenos JavaScript jēdzienus, tostarp * :

  • "document.querySelectorAll()": šī metode atgriež visus dokumenta elementus, kas atbilst norādītajiem CSS atlasītājiem(-iem), kā statisku NodeList objektu.
  • "element.addEventListener()": metode addEventListener() pievieno notikumu apdarinātāju norādītajam elementam.
  • "element.classList": rekvizīts classList atgriež elementa klases nosaukumu(-us) kā DOMTokenList objektu.
  • `domTokenList.remove() un domTokenList.add()`: šīs metodes tiek izmantotas, lai pievienotu un noņemtu klases elementam/no tā.

Darbs ar ārējām bibliotēkām

Papildus vaniļas JavaScript mēs varam izmantot arī ārējās bibliotēkas, piemēram, jQuery, Angular, Vue.js un React.js, lai panāktu līdzīgu funkcionalitāti. Šīs bibliotēkas bieži nodrošina vienkāršākus un efektīvākus veidus, kā manipulēt ar DOM, tostarp dinamiskas klases izmaiņas. Šeit mēs iedziļināsimies citās metodēs, kuras varētu ieviest Angular un Vue.js.

Angular nodrošina RouterLinkActive direktīvu, ko mēs varētu izmantot, lai veidotu aktīvā maršrutētāja saiti:

<a routerLink="/route-path" routerLinkActive="active"></a>

Vietnē Vue.js mēs varam izmantot tagu ar atribūtu "aktīvā klase":

<router-link to="/route-path" active-class="active"></router-link>

Šīs ir modernas pieejas, lai manipulētu ar aktīvo maršrutētāja saišu klasi, kas ietver ārējo JavaScript bibliotēku izmantošanas priekšrocības.

Būtībā izpratne par to, kā manipulēt ar DOM, ir neaizstājama jebkura JavaScript izstrādātāja prasme. Tādējādi, apgūstot tādus koda fragmentus kā iepriekš, izstrādātāji varēs izveidot dinamiskas, intuitīvas un daudzpusīgas lietotāja saskarnes, kas uzlabo vispārējo lietotāja pieredzi.

Related posts: