Source

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" href="#">Disabled</a>
  </li>
</ul>

Ka whakamahia nga karaehe puta noa, na reira ka tino ngawari to tohu. Whakamahia <ul>te penei i runga ake nei, ka huri ranei i a koe ake me te kii i 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" href="#">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" href="#">Disabled</a>
  </li>
</ul>

Tiaro-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" href="#">Disabled</a>
  </li>
</ul>

Poutū

Tāpaehia tō whakaterenga mā te huri i te ahunga tūemi ngāwari me te .flex-columnwhaipainga. Me whakatakoto 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" href="#">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" href="#">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" href="#">Disabled</a>
  </li>
</ul>

Nga pire

Tangohia taua HTML, 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" href="#">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="#">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" href="#">Disabled</a>
  </li>
</ul>

I te wa e whakamahi ana i te <nav>whakatere-a-ringa, me whakauru .nav-itemki runga i nga punga.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">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.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

He rite ki te .nav-filltauira e whakamahi ana i te <nav>whakaterenga -a-ringa, me whakauru .nav-itemki runga i nga punga.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">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="#">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" href="#">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 nga Tikanga Kaituhi WAI 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-haspopup="true" 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" href="#">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-haspopup="true" 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" href="#">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, ahakoa ma nga tahua takaiho.

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

Ko nga atanga ripa hihiko, pera i te whakaahuatanga i roto i nga Tikanga Kaituhi WAI ARIA , 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 panui mata).

Kia mahara ko nga atanga ripa hihiri kia kaua e uru ki 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 ki te uru, karekau he huarahi tika ki te mapi i tenei momo hanga ki te tauira WAI ARIA paerewa, ko te tikanga kaore e taea te maarama ki nga kaiwhakamahi o nga hangarau awhina.

Kare pea koe i rongo ki a ratou he tarau jean Austin. Nesciunt tofu stumptown aliqua, retro synth master horoi. Moutere cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex wheke. Whakanohoia ki a salvia cillum iphone. Seitan aliquip quis cardigan kakahu a Amerika, te kai patu patu i etahi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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.

E kore e taea e koe te whai waahi ki te kore e pai ki a koe. Ka taea e koe te whai waahi ki te kore e whai waahi ki te mahi i mua. Ka taea e koe te tango i tetahi ahua o te ahua o te ahua o te ahua o te ahua o te kore utu. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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ū.

Ka taea e koe te whakaatu i te wa poto ka taea e koe te mahi i nga wa katoa. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').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 Ripa he data-target, he hrefkohanga ipu ranei kei roto i te DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').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 kei te waatea).
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 kei te waatea).
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. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})