Navs болон таб

Bootstrap-д орсон навигацийн бүрэлдэхүүн хэсгүүдийг хэрхэн ашиглах тухай баримт бичиг, жишээнүүд.

Энэ хуудсан дээр

Base nav

.navBootstrap-д ашиглах боломжтой навигаци нь үндсэн ангиас идэвхтэй болон идэвхгүй төлөв хүртэлх ерөнхий тэмдэглэгээ, хэв маягийг хуваалцдаг . Загвар бүрийн хооронд шилжихийн тулд өөрчлөгч ангиудыг солино уу.

Үндсэн .navбүрэлдэхүүн хэсэг нь flexbox-оор бүтээгдсэн бөгөөд бүх төрлийн навигацийн бүрэлдэхүүн хэсгүүдийг бүтээхэд бат бөх суурийг бүрдүүлдэг. Энэ нь зарим хэв маягийг дарах (жагсаалттай ажиллахад), илүү том цохилтод зориулсан зарим холбоосын дүүргэлт, үндсэн идэвхгүй хэв маягийг агуулдаг.

Үндсэн .navбүрэлдэхүүн хэсэг нь ямар ч .activeтөлөвийг агуулдаггүй. Дараах жишээнүүд нь тухайн анги нь ямар нэгэн тусгай загвар үүсгэхгүй гэдгийг харуулахын тулд ангиллыг багтаасан болно.

Идэвхтэй төлөвийг туслах технологид дамжуулахын тулд одоогийн хуудасны утгыг эсвэл багц дахь одоогийн зүйлийн утгыг aria-currentашиглан шинж чанарыг ашиглана уу.pagetrue

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Ангиудыг бүхэлд нь ашигладаг тул таны тэмдэглэгээ маш уян хатан байж болно. Хэрэв таны зүйлсийн дараалал чухал бол <ul>дээрх шиг s-г ашиглана уу эсвэл элементээр өөрөө өнхрүүлээрэй. Хэрэглээний хувьд navigation холбоосууд нь navigation-ийн элементүүдтэй адилхан ажилладаг боловч нэмэлт тэмдэглэгээгүйгээр ажилладаг.<ol><nav>.navdisplay: flex

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Боломжтой загварууд

.navӨөрчлөгч болон хэрэгслүүдийн тусламжтайгаар s бүрэлдэхүүн хэсгийн хэв маягийг өөрчил . Шаардлагатай бол хольж, тааруулж эсвэл өөрөө бүтээ.

Хэвтээ зэрэгцүүлэх

Flexbox хэрэгслүүдийн тусламжтайгаар Nav-ынхаа хэвтээ байрлалыг өөрчил . Анхдагчаар, navs нь зүүн тийш зэрэгцүүлсэн байдаг, гэхдээ та тэдгээрийг төв эсвэл баруун зэрэгцүүлсэн болгож хялбархан өөрчилж болно.

Төвлөрсөн .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Баруун тийш зэрэгцүүлсэн .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Босоо

Хэрэгслийн тусламжтайгаар уян хатан зүйлийн чиглэлийг өөрчилснөөр навигацаа нэгтгэнэ үү .flex-column. Тэдгээрийг зарим үзвэрийн талбарт овоолох хэрэгтэй, гэхдээ бусад нь биш үү? Хариуцлагатай хувилбаруудыг ашиглана уу (жишээ нь, .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Ердийнх шиг, босоо навигаци нь <ul>s-гүйгээр бас боломжтой.

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Таб

Дээрээс үндсэн nav-г авч, .nav-tabsтаб-тай интерфэйс үүсгэхийн тулд анги нэмдэг. Тэдгээрийг ашиглан манай таб JavaScript залгаасыг ашиглан tabable бүсүүдийг үүсгэ .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Эм

Үүнтэй ижил HTML-г аваарай, гэхдээ .nav-pillsоронд нь:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Бөглөх, зөвтгөх

Өөрчлөгч хоёр ангиас аль нэгийг нь бүрэн ашиглах боломжтой өргөнийг өргөтгөхийн тулд өөрийн .navагуулгыг хүчлээрэй. Боломжтой бүх зайг өөрийн .nav-items-ээр пропорциональ байдлаар дүүргэхийн тулд -г ашиглана уу .nav-fill. Бүх хэвтээ зай эзэлдэг боловч навигацийн зүйл бүр ижил өргөнтэй байдаггүй гэдгийг анхаарна уу.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Үүн дээр суурилсан навигацийг ашиглахдаа зөвхөн загварчлах элементүүдэд шаардлагатай тул <nav>та аюулгүйгээр орхиж болно ..nav-item.nav-link<a>

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Тэнцүү өргөнтэй элементүүдийн хувьд .nav-justified. Бүх хэвтээ зайг навигацийн холбоосууд эзлэх болно, гэхдээ .nav-fillдээрхээс ялгаатай нь навигацийн зүйл бүр ижил өргөнтэй байх болно.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

-д суурилсан навигацийн .nav-fillжишээтэй төстэй .<nav>

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Флекс хэрэгслүүдтэй ажиллах

Хэрэв танд мэдрэгчтэй навигаци хэрэгтэй бол хэд хэдэн flexbox хэрэгслийг ашиглах талаар бодож үзээрэй . Илүү дэлгэрэнгүй мэдээлэлтэй хэдий ч эдгээр хэрэгслүүд нь хариу үйлдэл үзүүлэх цэгүүдэд илүү их тохиргоог санал болгодог. Доорх жишээнд манай nav-г хамгийн доод цэг дээр байрлуулж, дараа нь жижиг завсарлагааны цэгээс эхлэн боломжтой өргөнийг дүүргэх хэвтээ байрлалд дасан зохицох болно.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Хүртээмжтэй байдлын тухайд

Хэрэв та навигацийн талбарыг хангахын тулд navs ашиглаж байгаа бол role="navigation"-ын хамгийн логик эх контейнерт a нэмэх <ul>эсвэл <nav>бүхэл бүтэн навигацын эргэн тойронд элемент оруулахаа мартуузай. <ul>Туслах технологиор үүнийг бодит жагсаалт болгон зарлахаас сэргийлж, дүрийг өөртөө нэмж болохгүй .

.nav-tabsАнгиудын хамт таб хэлбэрээр харагдахуйц загвартай байсан ч навигацийн мөрүүд эсвэл шинж чанаруудыг өгөх ёсгүй гэдгийг анхаарна уу . Эдгээр нь зөвхөн WAI ARIA Зохиогчийн Практикт тайлбарласны дагуу динамик таб бүхий интерфейсүүдэд тохиромжтой . Энэ хэсгийн динамик таб бүхий интерфэйсүүдийн JavaScript-н үйлдлийг жишээ болгон үзнэ үү . Манай JavaScript идэвхтэй таб дээр нэмэх замаар сонгосон төлөвийг зохицуулдаг тул динамик таб бүхий интерфэйсүүдэд атрибут шаардлагагүй .role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

Унтраах цэсийг ашиглах

Нэмэлт HTML болон унадаг JavaScript залгаас бүхий унадаг цэсүүдийг нэмнэ үү .

Унтраах цонхтой табууд

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Унтраах эмүүд

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Сасс

Хувьсагч

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

JavaScript-ийн үйлдэл

Табын JavaScript залгаасыг ашиглан дангаар нь эсвэл эмхэтгэсэн bootstrap.jsфайлаар оруулаарай - манай навигацийн таб болон эмүүдийг өргөтгөж, локал контентын таблагдах боломжтой хэсгийг үүсгэнэ үү.

WAI ARIA Зохиогчийн Практикт тайлбарласны дагуу динамик чихтэй интерфэйсүүд нь туслах технологи (дэлгэц уншигч гэх мэт) хэрэглэгчдэд бүтэц, үйл ажиллагаа, одоогийн төлөв байдлыг дамжуулахын тулд role="tablist", role="tab", role="tabpanel", болон нэмэлт шинж чанаруудыг шаарддаг . aria-Шилдэг туршлагын хувьд бид <button>табуудад элементүүдийг ашиглахыг зөвлөж байна, учир нь эдгээр нь шинэ хуудас эсвэл байршил руу шилжих холбоос биш харин динамик өөрчлөлтийг өдөөдөг удирдлага юм.

Динамик таб бүхий интерфэйсүүд нь унадаг цэсийг агуулж болохгүй , учир нь энэ нь ашиглах болон хүртээмжтэй холбоотой асуудал үүсгэдэг. Хэрэглэх боломжийн үүднээс авч үзвэл, одоо гарч байгаа табын гох элемент нь шууд харагдахгүй байгаа нь (хаалттай унадаг цэс дотор байгаа тул) төөрөгдөл үүсгэж болзошгүй юм. Хүртээмжтэй байдлын үүднээс авч үзвэл, энэ төрлийн бүтцийг стандарт WAI ARIA загварт буулгах оновчтой арга одоогоор байхгүй байгаа бөгөөд энэ нь туслах технологийн хэрэглэгчдэд амархан ойлгомжтой байх боломжгүй гэсэн үг юм.

Энэ бол Нүүр хуудасны холбогдох контентын зарим орлуулагч контент юм. Өөр табыг дарснаар дараагийн цонхонд энэ табыг харагдуулна. JavaScript таб нь агуулгын харагдах байдал болон хэв маягийг хянахын тулд ангиудыг сольж өгдөг. Та үүнийг таб, эм болон бусад .navхүчирхэг навигацийн тусламжтайгаар ашиглаж болно.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>

Энэ нь таны хэрэгцээнд нийцүүлэхийн тулд <ul>дээр дурдсанчлан дээр суурилсан тэмдэглэгээ эсвэл дурын "өөрийн" тэмдэглэгээтэй ажилладаг. Хэрэв та ашиглаж байгаа бол үүн дээр шууд <nav>нэмэх role="tablist"хэрэггүй, учир нь энэ нь элементийн чиглүүлэгчийн үндсэн үүргийг хүчингүй болгоно. Үүний оронд өөр элемент рүү (доорх жишээнд энгийн <div>) шилжиж, эргэн тойронд нь <nav>орооно уу.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>

Таб залгаас нь эмтэй ажилладаг.

<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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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>

Мөн босоо шахмалуудтай.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <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>

Өгөгдлийн шинж чанаруудыг ашиглах

Та ямар нэгэн JavaScript бичихгүйгээр зүгээр л нэг элемент дээр зааж өгснөөр таб data-bs-toggle="tab"эсвэл эм навигацийг идэвхжүүлж болно. data-bs-toggle="pill"Эдгээр өгөгдлийн шинж чанаруудыг .nav-tabsэсвэл дээр ашиглаарай .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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>

JavaScript-ээр дамжуулан

JavaScript-ээр чихтэй табуудыг идэвхжүүлэх (tab бүрийг тус тусад нь идэвхжүүлэх шаардлагатай):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

Та тусдаа табуудыг хэд хэдэн аргаар идэвхжүүлж болно:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Бүдгэрэх нөлөө

Табуудыг бүдгэрүүлэхийн .fadeтулд тус бүр дээр нэмнэ үү .tab-pane. Эхний табын самбар .showнь анхны агуулгыг харагдуулах ёстой.

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

Арга зүй

Асинхрон аргууд ба шилжилтүүд

Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.

Дэлгэрэнгүй мэдээллийг манай JavaScript баримтаас үзнэ үү .

constructor

Таб элемент болон агуулгын савыг идэвхжүүлдэг. Цонх нь DOM дахь контейнер зангилаа руу чиглэсэн data-bs-targetэсвэл холбоос ашиглаж байгаа бол атрибуттай байх ёстой.href

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

шоу

Өгөгдсөн табыг сонгоод холбогдох самбарыг харуулна. Өмнө нь сонгосон бусад таб сонгогдоогүй бөгөөд холбогдох самбар нуугдана. Цонхны самбар харагдахаас өмнө (өөрөөр хэлбэл shown.bs.tabүйл явдал болохоос өмнө) дуудагч руу буцна.

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

захиран зарцуулах

Элементийн табыг устгана.

getInstance

DOM элементтэй холбоотой табын жишээг авах боломжийг олгодог статик арга

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

DOM элементтэй холбоотой табын жишээг авах, эсвэл үүнийг эхлүүлээгүй тохиолдолд шинээр үүсгэх боломжийг олгодог статик арга.

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Үйл явдал

Шинэ табыг харуулах үед үйл явдлууд дараах дарааллаар асна:

hide.bs.tab(одоогийн идэвхтэй таб дээр)
show.bs.tab(харуулах таб дээр)
hidden.bs.tab(өмнөх идэвхтэй таб дээрх үйл явдлынхтай ижил hide.bs.tab)
shown.bs.tab(шинээр идэвхжсэн, show.bs.tabүйл явдалтай ижилхэн харагдах таб дээр)

Хэрэв ямар ч таб аль хэдийн идэвхтэй байгаагүй бол hide.bs.tabболон hidden.bs.tabүйл явдлууд идэвхгүй болно.

Үйл явдлын төрөл	Тодорхойлолт
`show.bs.tab`	Энэ үйл явдал tab шоу дээр гарч ирдэг боловч шинэ таб харагдахаас өмнө. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд `event.target`болон ашиглана уу.`event.relatedTarget`
`shown.bs.tab`	Энэ үйл явдал нь табыг харуулсны дараа tab шоунд идэвхждэг. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд `event.target`болон ашиглана уу.`event.relatedTarget`
`hide.bs.tab`	Энэ үйл явдал шинэ цонхыг харуулах үед идэвхждэг (ингэснээр өмнөх идэвхтэй табыг нуух шаардлагатай). Одоогийн идэвхтэй таб болон удахгүй идэвхтэй болох шинэ табыг тус тус чиглүүлэхийн тулд `event.target`болон ашиглана уу.`event.relatedTarget`
`hidden.bs.tab`	Энэ үйл явдал шинэ табыг харуулсны дараа идэвхждэг (ингэснээр өмнөх идэвхтэй таб нуугдсан). Өмнөх идэвхтэй таб болон шинэ идэвхтэй табыг тус тус чиглүүлэхийн тулд `event.target`болон ашиглана уу.`event.relatedTarget`

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})