Accentsconagua

Slik legger du til dypkobling til kategorien Bootstrap 4 Tabs

Webdesign
Share

I dag lærer vi hvordan du legger til "dyp kobling" til Bootstrap 4-fanene. For bedre å forstå hva vi jobber med, sjekk demo siden og ta hensyn til to ting:

  1. Hvordan nettadressen endres når du klikker på fanene.
  2. Ved å gi hver av kategoriene sin egen nettadresse, blir innholdet delbart. Hvis du henter nettadressen til en kategori og åpner den i en annen nettleser / vindu, vil den tilhørende kategorien bli synlig.


Merk at nettadressen gjenspeiler den valgte kategorien

Vi skisserer tre hovedtrinn; HTML, CSS og JavaScript. En viss grad av kompetanse for alle tre av disse antas. Er du glad for å se hvordan vi skal bygge dette? Hvis svaret er ja, la oss komme i gang!

1. Bygg fanene

Vi slår ting av med en startmaler hentet fra Bootstraps dokumentasjon.

        Slik legger du til dypkobling til kategorien Bootstrap 4 Tabs

Hvis du vil opprette fanene, vil vi dra nytte av eksempelkoden for fanekomponenten som Bootstrap tilbyr: 

     
  •  Hjem 
    •  
  •  Historie 
    •  
  •  By attraksjoner 
    •

2. CSS

Deretter angir vi noen CSS-regler for vår komponent. Ingenting for fancy, bare noen grunnleggende stiler. Det er verdt å nevne at i en tidligere opplæring brukte vi lignende stiler til å bygge en egendefinert fanekomponent.

Her er de første stilene:

.nav-mytabs margin-top: 2rem;  .nav-mytabs li: ikke (: siste barn) margin-right: 7px;  .nav-mytabs a posisjon: relative; topp: 4px; polstring: 10px 25px; border-radius: 2px 2px 0 0; bakgrunn: hvit; farge svart; opasitet: 0,7; overgang: alle 0.1 s brukervennlige  .nav-mytabs a.active, .nav-mytabs a: svever opacity: 1; topp: 0;  .mytab-innhold posisjon: relativ; z-indeks: 2; polstring: 25px; grense-radius: 0 4px 4px 4px; bakgrunn: hvit;

3. JavaScript

Med HTML og CSS på plass, er det på tide å se på den nødvendige JavaScript-koden (dette er den viktige biten).

Først når DOM er klar, henter vi nettadressen til siden og bruker et vanlig uttrykk for å fjerne det etterfølgende slash. For eksempel, hvis den opprinnelige nettadressen er noe/, Den endrede nettadressen vil være noe.

Deretter sjekker vi for å se om nettadressen inneholder en hash. Hvis det er tilfellet, betyr det at vi vil vise innholdet i den andre eller tredje kategorien (i vårt eksempel). For å gjøre det, utfører vi følgende:

  1. Hent navnet på målfanen og aktiver den ved å bruke Bootstrap's tab metode.
  2. Bruk et vanlig uttrykk for å generere ønsket URL-format.
  3. Oppdater siden URL uten å tvinge en sideoppdatering ved å dra nytte av replaceState metode.
  4. Tvinge eventuelt sideskrollen til å starte fra toppen av siden.

Hver gang vi klikker på en fane, gjør vi følgende:

  1. Hent href Tilordne verdien av denne kategorien. I vårt tilfelle er de mulige verdiene #hjem, #historie, # City-attraksjoner.
  2. Kontroller attributtverdien og, avhengig av det, bygge ønsket URL-format. 
  3. Oppdater siden URL uten å tvinge en sideoppdatering ved å dra nytte av replaceState metode.

Her er JavaScript som tar seg av alt det:

$ (dokument) .ready (() => la url = location.href.replace (/ \ / $ /, ""), hvis (location.hash) const hash = url.split ("#"); $ ('# myTab a [href = "#' + hash [1] + '"]') .fanen ("show"); url = location.href.replace (/ \ / # /, "#"); history.replaceState (null, null, url); setTimeout (() => $ (vindu) .scrollTop (0);, 400); $ ('a [data-toggle = "tab"]'). på ("klikk", funksjon () la newUrl; const hash = $ (dette) .attr ("href"); hvis (hash == "#home") newUrl = url.split ("#") [ 0; else newUrl = url.split ("#") [0] + hash; newUrl + = "/"; history.replaceState (null, null, newUrl);););

4. Nettleserstøtte

Demoen skal fungere godt i alle nyere nettlesere. For enkelhet har jeg ikke brukt en JavaScript-kompilator (for eksempel Babel), men i din egen kode må du kanskje.

Konklusjon

I denne opplæringen klarte vi å tilpasse oppførselen til Bootstrap 4-fanene, ved å gi hver kategori en identifiserbar nettadresse, noe som gjør innholdet mer navigasjonelt og delbart. Husk at prosessen som implementeres her, også kan brukes på andre rammer eller til og med en tilpasset fanekomponent.

Hvis det er noe du ikke forstod, eller noe som virker uklart for deg, gi meg beskjed i kommentarene nedenfor!

Videre lesning


Webdesign
×