Navs
Dokumentation og eksempler på, hvordan du bruger Bootstraps medfølgende navigationskomponenter.
Base nav
Navigation tilgængelig i Bootstrap deler generel markering og stilarter, fra basisklassen .nav
til de aktive og deaktiverede tilstande. Skift modifikatorklasser for at skifte mellem hver stil.
Basiskomponenten .nav
er bygget med flexbox og giver et stærkt fundament til at bygge alle typer navigationskomponenter. Det inkluderer nogle stiltilsidesættelser (til at arbejde med lister), noget linkpolstring til større hitområder og grundlæggende deaktiveret styling.
.nav
inkluderer ikke nogen
.active
tilstand. Følgende eksempler inkluderer klassen, primært for at demonstrere, at denne særlige klasse ikke udløser nogen speciel styling.
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Klasser bruges hele vejen igennem, så din opmærkning kan være super fleksibel. Brug <ul>
s som ovenfor, <ol>
hvis rækkefølgen af dine varer er vigtig, eller rul dine egne med et <nav>
element. Fordi de .nav
bruger display: flex
, opfører nav-linkene det samme, som nav-elementer ville, men uden den ekstra markup.
<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Tilgængelige stilarter
Skift stilen på .nav
s-komponenten med modifikatorer og hjælpeprogrammer. Mix og match efter behov, eller byg din egen.
Horisontal justering
Skift den vandrette justering af din nav med flexbox-værktøjer . Som standard er navs venstrejusteret, men du kan nemt ændre dem til center- eller højrejusteret.
Centreret med .justify-content-center
:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Højrejusteret med .justify-content-end
:
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Lodret
Stable din navigation ved at ændre retningen på flex-elementet med .flex-column
værktøjet. Skal du stable dem på nogle visningsporte, men ikke andre? Brug de responsive versioner (f.eks. .flex-sm-column
).
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Som altid er lodret navigation også muligt uden <ul>
s.
<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Faner
Tager den grundlæggende nav ovenfra og tilføjer .nav-tabs
klassen for at generere en fanebaseret grænseflade. Brug dem til at oprette tabuleringsområder med vores fane JavaScript-plugin .
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Piller
Tag den samme HTML, men brug .nav-pills
i stedet:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Udfyld og begrund
Tving dit .nav
indhold til at udvide den fulde tilgængelige bredde en af to modifikationsklasser. For proportionelt at fylde al tilgængelig plads med dine .nav-item
s, brug .nav-fill
. Bemærk, at al vandret plads er optaget, men ikke alle nav-elementer har samme bredde.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Når du bruger en <nav>
-baseret navigation, kan du roligt udelade .nav-item
, da det kun .nav-link
er nødvendigt for stylingelementer <a>
.
<nav class="nav nav-pills nav-fill">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
For lige brede elementer, brug .nav-justified
. Al vandret plads vil blive optaget af nav-links, men i modsætning til .nav-fill
ovenstående vil hvert nav-element have samme bredde.
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Svarende til .nav-fill
eksemplet med en <nav>
-baseret navigation.
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Arbejder med flexværktøjer
Hvis du har brug for responsive nav-variationer, kan du overveje at bruge en række flexbox-værktøjer . Selvom de er mere omfattende, tilbyder disse værktøjer større tilpasning på tværs af responsive brudpunkter. I eksemplet nedenfor vil vores nav blive stablet på det laveste brudpunkt og derefter tilpasse sig til et vandret layout, der udfylder den tilgængelige bredde fra det lille brudpunkt.
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>
Angående tilgængelighed
Hvis du bruger nav'er til at levere en navigationslinje, skal du sørge for at tilføje en role="navigation"
til den mest logiske overordnede container for <ul>
, eller omslutte et <nav>
element omkring hele navigationen. Tilføj ikke rollen til sig <ul>
selv, da dette ville forhindre den i at blive annonceret som en faktisk liste af hjælpeteknologier.
Bemærk, at navigationsbjælker, selvom de er visuelt stilet som faner med .nav-tabs
klassen, ikke skal gives role="tablist"
, role="tab"
eller role="tabpanel"
attributter. Disse er kun egnede til dynamiske fanegrænseflader, som beskrevet i ARIA Authoring Practices Guide-fanemønsteret . Se JavaScript-adfærd for dynamiske fanegrænseflader i dette afsnit for et eksempel.
Brug af dropdowns
Tilføj dropdown menuer med lidt ekstra HTML og dropdowns JavaScript plugin .
Faner med rullemenuer
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Piller med dropdowns
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
JavaScript adfærd
Brug fanen JavaScript-plugin - inkluder det individuelt eller gennem den kompilerede bootstrap.js
fil - til at udvide vores navigationsfaner og piller til at skabe faneblade med lokalt indhold.
Hvis du bygger vores JavaScript fra kilden, kræverutil.js
det .
Dynamiske fanegrænseflader, som beskrevet i ARIA Authoring Practices Guide-fanemønsteret , kræver role="tablist"
, role="tab"
, role="tabpanel"
, og yderligere aria-
attributter for at formidle deres struktur, funktionalitet og aktuelle tilstand til brugere af hjælpeteknologier (såsom skærmlæsere). Som en bedste praksis anbefaler vi at bruge <button>
elementer til fanerne, da disse er kontroller, der udløser en dynamisk ændring, snarere end links, der navigerer til en ny side eller placering.
Pladsholderindhold for fanepanelet. Denne vedrører fanen Hjem. Tager dig miles højt, så højt, fordi hun har det ene internationale smil. Der er en fremmed i min seng, der banker i mit hoved. Åh nej. I et andet liv ville jeg få dig til at blive. For jeg er i stand til alt. Klæder sig til min kroningskamp. Bruges til at stjæle dine forældres spiritus og klatre op på taget. Tone, solbrun pasform og klar, skru op for den bliver tung. Hendes kærlighed er som et stof. Jeg har vist glemt, at jeg havde et valg.
Pladsholderindhold for fanepanelet. Denne vedrører profilfanen. Du har den fineste arkitektur. Passtempler, hun er kosmopolitisk. Fint, friskt, voldsomt, vi fik det på lås. Har aldrig planlagt, at jeg en dag ville miste dig. Hun æder dit hjerte ud. Dit kys er kosmisk, hver bevægelse er magi. Jeg mener dem, jeg mener som om hun er den ene. Hilsen kære lad os tage en rejse. Bare ejer natten som den 4. juli! Men du vil hellere gå til spilde.
Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
For at hjælpe med at passe til dine behov fungerer dette med <ul>
-baseret opmærkning, som vist ovenfor, eller med enhver vilkårlig "rulle din egen" opmærkning. Bemærk, at hvis du bruger <nav>
, bør du ikke tilføje role="tablist"
direkte til det, da dette ville tilsidesætte elementets oprindelige rolle som navigationsvartegn. Skift i stedet til et alternativt element (i eksemplet nedenfor, et simpelt <div>
) og vik det <nav>
rundt.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
Tabs-plugin'et virker også med piller.
Pladsholderindhold for fanepanelet. Denne vedrører fanen Hjem. Tager dig miles højt, så højt, fordi hun har det ene internationale smil. Der er en fremmed i min seng, der banker i mit hoved. Åh nej. I et andet liv ville jeg få dig til at blive. For jeg er i stand til alt. Klæder sig til min kroningskamp. Bruges til at stjæle dine forældres spiritus og klatre op på taget. Tone, solbrun pasform og klar, skru op for den bliver tung. Hendes kærlighed er som et stof. Jeg har vist glemt, at jeg havde et valg.
Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
Og med lodrette piller.
Pladsholderindhold for fanepanelet. Denne vedrører fanen Hjem. Så dig i centrum synge Blues. Se dig kredse om afløbet. Hvorfor lader du mig ikke komme forbi? Tungt er hovedet, der bærer kronen. Ja, vi får engle til at græde, og det regner ned på jorden fra oven. Vil du se showet i 3D, en film. Føler du dig nogensinde så papirtynd. Det er et ja eller nej, nej måske.
Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
</div>
Brug af dataattributter
Du kan aktivere en fane- eller pillenavigation uden at skrive JavaScript ved blot at angive data-toggle="tab"
eller data-toggle="pill"
på et element. Brug disse dataattributter på .nav-tabs
eller .nav-pills
.
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Via JavaScript
Aktiver faner, der kan tabuleres via JavaScript (hver fane skal aktiveres individuelt):
$('#myTab button').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Du kan aktivere individuelle faner på flere måder:
$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab
Fade effekt
For at få faner til at falme ind, skal du tilføje .fade
til hver .tab-pane
. Den første fanerude skal også .show
gøre det oprindelige indhold synligt.
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Metoder
Asynkrone metoder og overgange
Alle API - metoder er asynkrone og starter en overgang . De vender tilbage til den, der ringer, så snart overgangen er startet, men før den slutter . Derudover vil et metodekald på en overgangskomponent blive ignoreret .
$().tab
Aktiverer et faneelement og indholdsbeholder. Tab skal have enten en data-target
eller, hvis du bruger et link, en href
attribut, der er målrettet mod en containernode i DOM.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
<script>
$(function () {
$('#myTab li:last-child button').tab('show')
})
</script>
.tab('vis')
Vælger den givne fane og viser dens tilhørende rude. Enhver anden fane, der tidligere er valgt, bliver fravalgt, og dens tilknyttede rude er skjult. Vender tilbage til den, der ringer, før faneruden faktisk er blevet vist (dvs. før shown.bs.tab
hændelsen indtræffer).
$('#someTab').tab('show')
.tab('dispose')
Ødelægger et elements fane.
Begivenheder
Når du viser en ny fane, udløses begivenhederne i følgende rækkefølge:
hide.bs.tab
(på den aktuelle aktive fane)show.bs.tab
(på fanen der skal vises)hidden.bs.tab
(på den forrige aktive fane, den samme som forhide.bs.tab
begivenheden)shown.bs.tab
(på det nyligt aktive faneblad, det samme som forshow.bs.tab
begivenheden)
Hvis ingen fane allerede var aktiv, vil begivenhederne hide.bs.tab
og hidden.bs.tab
ikke blive udløst.
Begivenhedstype | Beskrivelse |
---|---|
show.bs.tab | Denne begivenhed udløses på faneshow, men før den nye fane er blevet vist. Brug event.target og event.relatedTarget til at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig). |
vist.bs.faneblad | Denne begivenhed udløses på faneshow, efter at en fane er blevet vist. Brug event.target og event.relatedTarget til at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig). |
hide.bs.tab | Denne hændelse udløses, når en ny fane skal vises (og dermed skal den tidligere aktive fane skjules). Brug event.target og event.relatedTarget til at målrette henholdsvis den aktuelle aktive fane og den nye snart-aktive fane. |
skjult.bs.fane | Denne hændelse udløses, efter at en ny fane er vist (og dermed er den tidligere aktive fane skjult). Brug event.target og event.relatedTarget til at målrette henholdsvis den forrige aktive fane og den nye aktive fane. |
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})