in English

Navs

Nga tuhinga me nga tauira mo te whakamahi i nga waahanga whakatere whakauru a Bootstrap.

Nav turanga

Ko te whakaterenga e waatea ana i Bootstrap e tiritiri ana i nga tohu me nga momo ahua, mai i te .navkaraehe turanga ki nga whenua kaha me te haua. Hurihia nga karaehe whakarerekē kia huri i waenga i ia kāhua.

Ko te waahanga turanga .navhe mea hanga ki te flexbox me te whakarato i te turanga kaha mo te hanga i nga momo waahanga whakatere katoa. Kei roto ko etahi o nga momo taapiri (mo te mahi me nga raarangi), etahi papaa hono mo nga waahi nui ake, me te hanga whakangao haua.

Ko te waahanga turanga .navkaore he .activeahua. Kei roto i nga tauira e whai ake nei ko te karaehe, ko te nuinga hei whakaatu kaore tenei karaehe e whakaohooho i tetahi momo hanga motuhake. 
<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>

Ka whakamahia nga karaehe puta noa, na reira ka tino ngawari to tohu. Whakamahia <ul>nga mea penei i runga ake nei, <ol>mena he mea nui te raupapa o au mea, ka huri ranei i a koe ake me tetahi <nav>huānga. Na te mea ko nga .navwhakamahinga display: flex, he rite te ahua o nga hononga nav ki nga taonga nav, engari kaore he tohu taapiri.

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

Ngā kāhua e wātea ana

Hurihia te ahua o .navte waahanga s me nga whakarereke me nga taputapu. Whakaranuhia me te whakarite i nga mea e hiahiatia ana, ka hanga ranei i a koe ake.

Tirohanga whakapae

Hurihia te tirohanga whakapae o to nav me nga taputapu flexbox . Ma te taunoa, he tiaaro maui nga navs, engari ka taea e koe te huri ki te tika ki waenganui, matau ranei.

Pokapū ki .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>

Tirohanga-matau ki .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>

Poutū

Tāpaehia tō whakatere mā te huri i te ahunga tūemi ngāwari me te .flex-columnwhaipainga. Me tāpae ki runga i etahi tauranga tirohanga engari kaua ki etahi atu? Whakamahia nga putanga urupare (hei tauira, .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>

I nga wa katoa, ka taea te whakatere poutū me te kore <ul>s, rawa.

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

Ripa

Ka tango i te nav taketake mai i runga ka taapirihia te .nav-tabsakomanga ki te whakaputa i tetahi atanga ripa. Whakamahia hei hanga rohe ripanga me ta maatau ripa JavaScript mono .

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

Nga pire

Tangohia taua HTML ano, engari whakamahia .nav-pills:

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

Whakakiia ka whakatika

Whakahauhia .navo ihirangi ki te whakawhānui i te whanui e waatea ana tetahi o nga akomanga whakarereke e rua. Ki te whakaki i nga waahi katoa e waatea ana ki o .nav-items, whakamahia .nav-fill. Kia mahara kei te noho nga mokowā whakapae katoa, engari ehara i te mea he rite te whanui o nga mea nav katoa.

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

I te wa e whakamahi ana koe i te <nav>whakaterenga-a-ringa, ka taea e koe te whakakore .nav-itemi te mea .nav-linke hiahiatia ana mo nga <a>huānga whakaahua.

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

Mo nga huānga rite-whanui, whakamahia .nav-justified. Ko nga mokowā whakapae katoa ka nohoia e nga hononga nav, engari kare i rite ki .nav-fillrunga ake nei, ka rite te whanui o ia mea nav.

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

He rite ki te .nav-filltauira ma te whakamahi i te <nav>navigation -based.

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

Te mahi me nga taputapu ngawari

Mena ka hiahia koe ki nga rereketanga nav aro, whakaarohia te whakamahi i te raupapa o nga taputapu flexbox . Ahakoa he nui ake nga korero, ko enei taputapu he nui ake nga whakaritenga puta noa i nga waahanga pakaru urupare. I roto i te tauira i raro nei, ka tapaehia to maatau nav ki te waahi pakaru iti rawa, ka urutau ki te whakatakotoranga whakapae e whakakiia ana te whanui e waatea ana mai i te waahi pakaru iti.

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

Mo te urunga

Mena kei te whakamahi koe i nga navs ki te whakarato i te pae whakaterenga, me whakauru he role="navigation"ki te ipu matua tino arorau o te <ul>, ka takai ranei i tetahi <nav>huānga huri noa i te whakaterenga katoa. Kaua e taapirihia te mahi ki a <ul>ia ano, na te mea ka kore e panuitia hei raarangi tuuturu ma nga hangarau awhina.

Kia mahara ko nga pae whakaterenga, ahakoa kua tohua hei ripa me te .nav-tabskaraehe, kaua e hoatu role="tablist", huanga role="tab"ranei . role="tabpanel"He tika noa enei mo nga atanga ripa hihiri, pera i whakaahuatia i roto i te tauira ripa Aratohu Mahinga Kaituhi ARIA . Tirohia te whanonga JavaScript mo nga atanga ripa hihiri i tenei waahanga hei tauira.

Te whakamahi takaiho

Taapirihia nga tahua takaiho me te HTML iti me te mono JavaScript takaiho .

Ripa whai takaiho

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

Nga pire me nga takaiho

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

Te whanonga JavaScript

Whakamahia te mono JavaScript ripa—whakauruhia takitahi, ma te bootstrap.jskonae kua whakahiato—ki te toro atu i a maatau ripa whakatere me nga pire hei hanga i nga panui ripanga o nga ihirangi rohe.

Mena kei te hanga koe i to maatau JavaScript mai i te puna, meutil.js .

Atanga ripa hihiko, pera i whakaahuatia i roto i te ARIA Authoring Practices Guide tabs patterns , me role="tablist", role="tab", role="tabpanel", me etahi atu aria-huanga hei kawe i o raatau hanganga, mahi me te ahuatanga o naianei ki nga kaiwhakamahi o nga hangarau awhina (penei i nga kaipanui mata). Hei mahi pai rawa atu, ka tūtohu matou ki te whakamahi i <button>nga huānga mo nga ripa, i te mea he mana enei ka puta he huringa hihiri, kaua ki nga hononga e whakatere ana ki tetahi wharangi hou, waahi ranei.

Kia mahara ko te ripa JavaScript mono kaore i te tautoko i nga atanga ripanga kei roto nga tahua takaiho, na te mea ka puta nga take mo te whakamahi me te urunga. Mai i te tirohanga whaihua, ko te mea kaore i te kitea tonutia te huānga keu o te ripa e whakaatuhia ana i tenei wa (i te mea kei roto i te tahua takaiho kati) ka raru. Mai i te tirohanga whakaaheitanga, karekau he huarahi tika ki te mapi i tenei momo hanga ki tetahi tauira WAI ARIA paerewa, ko te tikanga kaore e taea te maarama ki nga kaiwhakamahi o nga hangarau awhina.

Ihirangi puri wahi mo te paewhiri ripa. E pa ana tenei ki te ripa kaainga. He maero te teitei, he teitei, na te mea kei a ia tera ataata o te ao. He tauhou kei roto i taku moenga, he paheketanga kei toku mahunga. Aue, kahore. I tetahi atu oranga ka noho ahau ki a koe. No te mea ka taea e au nga mea katoa. E tika ana mo taku whawhai whakakorona. He mea tahae i te waipiro a o matua, ka piki ki te tuanui. Ko te oro, he kiri karaka me te reri, whakahurihia kia taumaha. Ko tana aroha he rite ki te tarukino. Te mana'o nei ahau i wareware ahau i ahau i te kōwhiringa.

Ihirangi puri wahi mo te paewhiri ripa. E pa ana tenei ki te ripa kōtaha. I whiwhi koe i te hoahoanga tino pai. Ko nga tohu uruwhenua, he ao ia. He pai, he hou, he weriweri, ka mau matou ki te raka. Kaore rawa i whakaaro kia kotahi ra ka ngaro koe i ahau. Ka kainga e ia to ngakau. He aorangi to kihi, he makutu nga nekehanga katoa. Ko te tikanga ko nga mea, ko te tikanga ko ia te mea. Tena koutou e nga hoa aroha, kia haere tatou. Nou ake te po penei i te 4 o Hurae! Engari he pai ke ki te moumou.

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>

Hei awhina i to hiahia, ka mahi tenei me te tohu-a-ringa <ul>, penei i runga ake nei, me etahi tohu "hurihia taau ake" ranei. Kia mahara mena kei te whakamahi koe i te <nav>, kaua e taapiri role="tablist"tika atu, na te mea ka takahia te mahi taketake o te huānga hei tohu whenua whakatere. Engari, huri ki tetahi atu huānga (i te tauira i raro nei, he ngawari <div>) ka takai i te <nav>taha.

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

Ka mahi ano te mono ripa me nga pire.

Ihirangi puri wahi mo te paewhiri ripa. E pa ana tenei ki te ripa kaainga. He maero te teitei, he teitei, na te mea kei a ia tera ataata o te ao. He tauhou kei roto i taku moenga, he paheketanga kei toku mahunga. Aue, kahore. I tetahi atu oranga ka noho ahau ki a koe. No te mea ka taea e au nga mea katoa. E tika ana mo taku whawhai whakakorona. He mea tahae i te waipiro a o matua, ka piki ki te tuanui. Ko te oro, he kiri karaka me te reri, whakahurihia kia taumaha. Ko tana aroha he rite ki te tarukino. Te mana'o nei ahau i wareware ahau i ahau i te kōwhiringa.

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>

Me nga pire poutū.

Ihirangi puri wahi mo te paewhiri ripa. E pa ana tenei ki te ripa kaainga. I kite koe i te taone nui e waiata ana i nga Blues. Kia mataara koe i te porowhita i te awaawa. He aha koe te tuku ai kia tu ahau? He taumaha te mahunga e mau ana i te karauna. Ae, e tangi ana tatou i nga anahera, e ua ana ki runga ki te whenua i runga. Kei te pirangi koe ki te kite i te whakaaturanga i roto i te 3D, he kiriata. Ka rongo koe, he pepa kikokore. He ae, kaore ranei, kaore pea.

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>

Te whakamahi i nga huanga raraunga

Ka taea e koe te whakahohe i te whakatere ripa, pire ranei me te kore e tuhi i tetahi JavaScript ma te tohu noa , ki runga data-toggle="tab"ranei data-toggle="pill"i tetahi huānga. Whakamahia enei huanga raraunga ki runga .nav-tabsranei .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>

Ma te JavaScript

Whakahohehia nga ripa ripa ma te JavaScript (me whakahohe takitahi ia ripa):

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

Ka taea e koe te whakahohe i nga ripa takitahi i roto i nga huarahi maha:

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

Painga muhani

Kia memeha haere nga ripa, taapiri atu .fadeki ia .tab-pane. Ko te pihanga ripa tuatahi me .showwhakaatu te ihirangi tuatahi.

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

Nga tikanga

Nga tikanga tukutahi me nga whakawhitinga

Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .

Tirohia ta maatau tuhinga JavaScript mo etahi atu korero .

$(). ripa

Ka whakahohe i te huānga ripa me te ipu ihirangi. Me whai i te Ripa he data-target, mehemea kei te whakamahi hononga, he hrefhuanga e aro ana ki tetahi node ipu i te 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('whakaatu')

Ka kowhiri i te ripa kua homai ka whakaatu i tana pihanga hono. Ko etahi atu ripa i tohua i mua ka kore i tohua, ka hunahia te pihanga hono. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te pihanga ripa (arā i mua i te shown.bs.tabputa o te takahanga).

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

.tab('tuku')

Ka whakakore i te ripa o te huānga.

Nga huihuinga

Ina whakaatu ana i te ripa hou, ka pupuhi nga takahanga i roto i te raupapa e whai ake nei:

  1. hide.bs.tab(i runga i te ripa hohe onāianei)
  2. show.bs.tab(i runga i te ripa hei whakaatu)
  3. hidden.bs.tab(i runga i te ripa hohe o mua, he rite ki te hide.bs.tabkaupapa)
  4. shown.bs.tab(i runga i te ripa katahi ano ka hohe ka whakaatuhia, he rite tonu ki tera mo te show.bs.tabtakahanga)

Mena karekau he ripa i hohe, karekau te hide.bs.tabme hidden.bs.tabnga takahanga e pana.

Momo Takahanga Whakaahuatanga
whakaatu.bs.tab Ka pupuhi tenei takahanga ki te whakaaturanga ripa, engari i mua i te whakaaturanga o te ripa hou. Whakamahia event.targetme event.relatedTargette aro ki te ripa hohe me te ripa hohe o mua (mehemea e waatea ana).
whakaaturia.bs.tab Ka ahi tenei takahanga ki te whakaaturanga ripa i muri i te whakaaturanga ripa. Whakamahia event.targetme event.relatedTargette aro ki te ripa hohe me te ripa hohe o mua (mehemea e waatea ana).
huna.bs.tab Ka puhipuhi tenei takahanga ina whakaatuhia he ripa hou (na reira me huna te ripa hohe o mua). Whakamahia event.targetme event.relatedTargette whakawhāiti i te ripa hohe onāianei me te ripa hou-hohe-hohe, ia.
huna.bs.tab Ka ahi tenei takahanga i muri i te whakaaturanga ripa hou (na reira ka huna te ripa hohe o mua). Whakamahia event.targetme event.relatedTargette aro ki te ripa hohe o mua me te ripa hohe hou. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})