Navs

Inyandiko n'ingero z'uburyo wakoresha Bootstrap irimo ibice byo kugenda.

Base nav

Kugenda kuboneka muri Bootstrap gusangira ibirango rusange nuburyo, kuva murwego shingiro .navkugeza kuri leta ikora kandi ifite ubumuga. Swap modifier ibyiciro kugirango uhindure hagati yuburyo bwose.

Ibice fatizo .navbyubatswe na flexbox kandi bitanga umusingi ukomeye wo kubaka ubwoko bwose bwibikoresho byo kugenda. Harimo uburyo bumwe burenga (bwo gukorana nurutonde), guhuza padding kubice binini byibasiwe, hamwe nubumuga bwibanze.

Ibice shingiro .navntabwo birimo .activeleta iyo ariyo yose. Ingero zikurikira zirimo icyiciro, cyane cyane kwerekana ko iri somo ryihariye ridatera imiterere idasanzwe.

<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>

Amasomo akoreshwa mugihe cyose, marike yawe rero irashobora guhinduka cyane. Koresha <ul>s nkibi byavuzwe haruguru, <ol>niba gahunda yibintu byawe ari ngombwa, cyangwa uzunguruke ibyawe hamwe <nav>nikintu. Kuberako .navikoreshwa display: flex, nav ihuza yitwara nkibintu bya nav byabikora, ariko nta marike yinyongera.

<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>

Uburyo buboneka

Hindura uburyo bwa .navs ibice hamwe nabahindura nibikorwa. Kuvanga no guhuza nkuko bikenewe, cyangwa wubake ibyawe.

Guhuza utambitse

Hindura utambitse utambitse ya nav yawe hamwe nibikoresho bya flexbox . Mburabuzi, navs ihujwe-ibumoso, ariko urashobora kuyihindura byoroshye hagati cyangwa iburyo.

Hagati hamwe .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>

Guhuza iburyo na .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>

Uhagaritse

Shyira inzira yawe muguhindura icyerekezo cya flex hamwe .flex-columnnibyingenzi. Ukeneye kubishyira kumurongo runaka ariko sibyo? Koresha verisiyo isubiza (urugero, .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>

Nkibisanzwe, vertical vertical ishoboka nta <ul>s, nayo.

<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>

Tab

Fata nav shingiro kuva hejuru hanyuma wongereho urwego .nav-tabsrwo kubyara interineti. Koresha kugirango ukore uturere twa tabbable hamwe na tab ya 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>

Ibinini

Fata iyo HTML imwe, ariko ukoreshe .nav-pillsaho:

<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>

Uzuza kandi ufite ishingiro

Hata .navibikubiyemo kugirango wongere ubugari bwuzuye buboneka kimwe mubyiciro bibiri bihindura. Kugereranya kuzuza umwanya wose uboneka hamwe na .nav-items, koresha .nav-fill. Menya ko umwanya wose utambitse urimo, ariko ntabwo buri kintu cya nav gifite ubugari bumwe.

<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>

Mugihe ukoresheje inzira <nav>-ishingiye kugendagenda, urashobora gusiba neza .nav-itemnkuko .nav-linkbisabwa gusa muburyo bwo gutunganya <a>ibintu.

<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>

Kubintu bingana-ubugari, koresha .nav-justified. Umwanya wose utambitse uzaba ufitwe na nav ihuza, ariko bitandukanye navuzwe .nav-fillharuguru, buri nav ikintu kizaba ubugari bumwe.

<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>

Bisa .nav-fillnurugero ukoresheje <nav>-bishingiye kugendagenda.

<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>

Gukorana na flex utilities

Niba ukeneye ibisubizo bitandukanya nav, tekereza gukoresha urukurikirane rwibikorwa bya flexbox . Mugihe inshinga nyinshi, izi nyungu zitanga ibisobanuro byinshi murwego rwo gusubiza. Murugero rukurikira, nav yacu izashyirwa kumurongo wo hasi cyane, hanyuma ihuze imiterere itambitse yuzuza ubugari buboneka guhera kumyanya mito.

<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>

Kubyerekeye kugerwaho

Niba ukoresha navs kugirango utange inzira yo kugendagenda, menya neza ko wongeraho role="navigation"kubintu byumvikana byababyeyi byabigenewe <ul>, cyangwa <nav>uzenguruke ikintu hafi yikigenda cyose. Ntukongere uruhare <ul>rwonyine, kuko ibi byakubuza gutangazwa nkurutonde nyarwo hakoreshejwe ikoranabuhanga rifasha.

Menya ko kugendagenda kumurongo, nubwo bigaragara neza nkibisobanuro hamwe .nav-tabsnishuri, ntibigomba gutangwa , role="tablist"cyangwa role="tab"ibiranga role="tabpanel". Ibi birakwiriye gusa kuri interineti ifite imbaraga, nkuko byasobanuwe muri ARIA Yandika Imyitozo ngororamubiri . Reba imyitwarire ya JavaScript kuri dinamike yanditswemo muri iki gice kurugero.

Gukoresha ibitonyanga

Ongeraho ibimanuka hamwe na HTML yongeyeho na plugin ya JavaScript .

Tab hamwe nibitonyanga

<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>

Ibinini hamwe nibitonyanga

<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>

Imyitwarire ya JavaScript

Koresha tab ya JavaScript plugin-shyiramo kugiti cyawe cyangwa unyuze muri bootstrap.jsdosiye yakozwe - kugirango wongere ibiyobora hamwe nibinini kugirango ukore ibipapuro byibirimo byaho.

Niba wubaka JavaScript yacu kuva isoko, birasabautil.js .

Imigaragarire ya dinamike, nkuko byasobanuwe muri ARIA Yandika Imyitozo Yubuyobozi bwa tabs ishusho , bisaba role="tablist",, hamwe nibindi biranga murwego rwo kugeza imiterere, imikorere nuburyo bugezweho kubakoresha ikoranabuhanga rifasha (nkabasoma ecran). Nkumwitozo mwiza, turasaba gukoresha ibintu kuri tabs, kuko aribwo bugenzuzi butera impinduka zikomeye, aho guhuza inzira igana kurupapuro rushya cyangwa ahantu.role="tab"role="tabpanel"aria-<button>

Menya neza ko tab ya JavaScript plugin idashyigikira interineti yashyizwemo irimo menu yamanutse, kuko ibyo bitera ibibazo byombi nibikoreshwa. Urebye kubikoresha, kuba ibyerekanwe kuri tab ya trigger yibintu bidahita bigaragara (nkuko biri imbere muri menu yafunzwe) birashobora gutera urujijo. Uhereye kubintu byoroshye, kuri ubu nta buryo bwumvikana bwo gushushanya ubu bwoko bwubaka ku buryo busanzwe bwa WAI ARIA, bivuze ko bidashobora kumvikana byoroshye kubakoresha ikoranabuhanga rifasha.

Ibibanza byumwanya kumwanya wibisobanuro. Iyi ijyanye na tab yo murugo. Ikujyana ibirometero birebire, hejuru cyane, 'kuberako afite inseko imwe mpuzamahanga. Hano hari umuntu utazi mu buriri bwanjye, hari umutwe wanjye. Yego, oya. Mu bundi buzima nagutera kuguma. 'Impamvu I, Ndashoboye ikintu cyose. Nkwiriye urugamba rwanjye. Byakoreshejwe kwiba inzoga zababyeyi bawe no kuzamuka hejuru yinzu. Ijwi, tan irakwiriye kandi iriteguye, uzindure itera gettin 'iremereye. Urukundo rwe ni nk'ibiyobyabwenge. Ndakeka ko nibagiwe ko mfite amahitamo.

Ibibanza byumwanya kumwanya wibisobanuro. Iyi ijyanye na tab yumwirondoro. Wabonye ubwubatsi bwiza. Kashe ya pasiporo, ni cosmopolitan. Nibyiza, bishya, bikaze, twabonye kubifunga. Ntabwo wigeze uteganya ko umunsi umwe nzagutakaza. Yarya umutima wawe. Gusomana kwawe ni isanzure, buri rugendo ni amarozi. Ndashaka kuvuga abo, ndashaka kuvuga ko ariwe. Ndabaramukije abakunzi reka dufate urugendo. Gusa gutunga ijoro nka 4 Nyakanga! Ariko wahitamo gupfusha ubusa.

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>

Kugira ngo ufashe guhuza ibyo ukeneye, ibi bikorana <ul>-bishingiye ku kimenyetso, nkuko bigaragara hejuru, cyangwa hamwe na "kuzenguruka ibyawe" uko bishakiye. Menya ko niba ukoresha <nav>, ntugomba kubyongeraho role="tablist"muburyo butaziguye, kuko ibi byakwirengagiza uruhare kavukire nkibimenyetso byerekana inzira. Ahubwo, hindukira mubindi bikoresho (murugero rukurikira, byoroshye <div>) hanyuma <nav>uzenguruke.

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.

<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>

Amacomeka ya tabs nayo akorana n'ibinini.

<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>

Kandi hamwe n'ibinini bihagaritse.

Ibibanza byumwanya kumwanya wibisobanuro. Iyi ijyanye na tab yo murugo. Yakubonye mumujyi uririmba Blues. Reba kuzenguruka imiyoboro. Kuki utanyemerera guhagarara? Ikiremereye ni umutwe wambara ikamba. Nibyo, dutera abamarayika kurira, imvura igwa kwisi hejuru. Ushaka kureba igitaramo muri 3D, firime. Ujya wumva, wumva impapuro zoroshye. Nibyo yego cyangwa oya, oya birashoboka.

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>

Koresha ibiranga amakuru

Urashobora gukora tab cyangwa ibinini bigenda utanditse JavaScript iyo ari yo yose ugaragaza gusa data-toggle="tab"cyangwa data-toggle="pill"kubintu. Koresha aya makuru ibiranga kuri .nav-tabscyangwa .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>

Binyuze kuri JavaScript

Gushoboza imbonerahamwe ya tabs ukoresheje JavaScript (buri tab igomba gukenera kugiti cye):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Urashobora gukora ama tabs kugiti cye muburyo butandukanye:

$('#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

Ingaruka zashize

Kugirango utume gushira, ongera .fadekuri buri .tab-pane. Urupapuro rwa mbere rwa pane rugomba kandi .showgukora ibintu byambere bigaragara.

<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>

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro .

$ (). tab

Gukora tab element hamwe nibikoresho birimo. Tab igomba kuba ifite a data-targetcyangwa, niba ukoresheje umurongo, hrefikiranga intego yibikoresho muri 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 ('kwerekana')

Hitamo tab yatanzwe kandi yerekana pane ifitanye isano. Iyindi tab yose yatoranijwe mbere iba idatoranijwe kandi pane ifitanye isano irahishe. Garuka kumuhamagara mbere yuko tab pane yerekanwe mubyukuri (nukuvuga mbere yuko shown.bs.tabibyabaye biba).

$('#someTab').tab('show')

.tab ('guta')

Gusenya ikintu cyibintu.

Ibyabaye

Iyo werekanye tab nshya, ibyabaye birashya muburyo bukurikira:

hide.bs.tab(kuri tab ikora)
show.bs.tab(kuri to-kwerekanwa tab)
hidden.bs.tab(kurupapuro rwibanze rukora, kimwe hide.bs.tabnkicyabaye)
shown.bs.tab(ku gishya-gikora gusa-cyerekanwe tab, kimwe kimwe show.bs.tabnicyabaye)

Niba nta tab yari isanzwe ikora, noneho hide.bs.tabibyabaye hidden.bs.tabntibizasezererwa.

Ubwoko bwibyabaye	Ibisobanuro
kwerekana.bs.tab	Ibirori birasa kuri tab yerekana, ariko mbere yuko tab nshya yerekanwe. Koresha `event.target`no `event.relatedTarget`gutondekanya tab ikora hamwe na tab yabanjirije gukora (niba ihari).
yerekanwe.bs.tab	Ibirori birasa kuri tab yerekanwe nyuma ya tab yerekanwe. Koresha `event.target`no `event.relatedTarget`gutondekanya tab ikora hamwe na tab yabanjirije gukora (niba ihari).
guhisha.bs.tab	Ibirori birasa iyo tab nshya igomba kwerekanwa (nuko rero tab ikora ibanza igomba guhishwa). Koresha `event.target`no `event.relatedTarget`kugenera icyerekezo gikora hamwe nigishya vuba-kugirango-gikore, kimwe.
bihishe.bs.tab	Ibirori birashya nyuma ya tab nshya yerekanwe (nuko rero tab yabanjirije gukora irahishe). Koresha `event.target`no `event.relatedTarget`guhitamo intego yabanjirije gukora hamwe na tab nshya ikora, uko bikurikirana.

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})