رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

گروه لیست

گروه های لیست یک جزء منعطف و قدرتمند برای نمایش یک سری محتوا هستند. آنها را تغییر دهید و گسترش دهید تا تقریباً از هر محتوایی پشتیبانی شود.

مثال اساسی

ابتدایی ترین گروه لیست یک لیست نامرتب با آیتم های لیست و کلاس های مناسب است. با گزینه های بعدی یا در صورت نیاز با CSS خود بر روی آن بسازید.

  • یک آیتم
  • یک مورد دوم
  • مورد سوم
  • مورد چهارم
  • و پنجمی
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

آیتم های فعال

برای نشان دادن انتخاب فعال فعلی، .activeبه a اضافه کنید..list-group-item

  • یک آیتم فعال
  • یک مورد دوم
  • مورد سوم
  • مورد چهارم
  • و پنجمی
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

موارد غیر فعال

.disabledبه a اضافه کنید .list-group-itemتا غیرفعال به نظر برسد. توجه داشته باشید که برخی از عناصر دارای .disabledجاوا اسکریپت سفارشی نیز برای غیرفعال کردن رویدادهای کلیکی آنها (مثلاً پیوندها) نیاز دارند.

  • یک مورد غیر فعال
  • یک مورد دوم
  • مورد سوم
  • مورد چهارم
  • و پنجمی
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

از <a>s یا <button>s برای ایجاد موارد گروهی لیست قابل اجرا با حالت شناور، غیرفعال و فعال با افزودن .list-group-item-actionاستفاده کنید. ما این شبه کلاس‌ها را از هم جدا می‌کنیم تا مطمئن شویم گروه‌های فهرست ساخته شده از عناصر غیر تعاملی (مانند <li>s یا <div>s) امکان کلیک یا ضربه را فراهم نمی‌کنند.

مطمئن شوید که از کلاس های استاندارد.btn در اینجا استفاده نکنید .

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

با <button>s، شما همچنین می توانید از disabledویژگی به جای .disabledکلاس استفاده کنید. متأسفانه، <a>s ویژگی غیرفعال را پشتیبانی نمی کند.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

فلاش

اضافه .list-group-flushکنید تا برخی از حاشیه‌ها و گوشه‌های گرد را حذف کنید تا موارد گروهی فهرست به صورت لبه به لبه در ظرف اصلی (مثلاً کارت‌ها) ارائه شود.

  • یک آیتم
  • یک مورد دوم
  • مورد سوم
  • مورد چهارم
  • و پنجمی
<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

شماره گذاری شده است

.list-group-numberedکلاس اصلاح کننده را اضافه کنید (و در صورت تمایل از یک <ol>عنصر استفاده کنید) برای انتخاب موارد گروه لیست شماره گذاری شده. اعداد از طریق CSS (برخلاف <ol>استایل پیش‌فرض مرورگر) برای قرارگیری بهتر در آیتم‌های گروه لیست و امکان سفارشی‌سازی بهتر تولید می‌شوند.

اعداد توسط counter-resetروی ایجاد می شوند <ol>و سپس با یک ::beforeعنصر شبه روی <li>با counter-incrementو استایل دهی می contentشوند.

  1. Cras justo odio
  2. Cras justo odio
  3. Cras justo odio
<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

اینها با محتوای سفارشی نیز عالی کار می کنند.

  1. عنوان فرعی
    Cras justo odio
    14
  2. عنوان فرعی
    Cras justo odio
    14
  3. عنوان فرعی
    Cras justo odio
    14
<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

افقی

.list-group-horizontalبرای تغییر طرح بندی آیتم های گروه لیست از عمودی به افقی در تمام نقاط شکست، اضافه کنید. از طرف دیگر، یک نوع پاسخگو را انتخاب کنید .list-group-horizontal-{sm|md|lg|xl|xxl}تا یک گروه لیست به صورت افقی در آن نقطه شکست شروع شود min-width. در حال حاضر گروه‌های فهرست افقی را نمی‌توان با گروه‌های فهرست همسطح ترکیب کرد.

نکته: آیا می‌خواهید در حالت افقی، آیتم‌های فهرست با عرض یکسان را گروه‌بندی کنید؟ .flex-fillبه هر یک از موارد گروه لیست اضافه کنید .

  • یک آیتم
  • یک مورد دوم
  • مورد سوم
  • یک آیتم
  • یک مورد دوم
  • مورد سوم
  • یک آیتم
  • یک مورد دوم
  • مورد سوم
  • یک آیتم
  • یک مورد دوم
  • مورد سوم
  • یک آیتم
  • یک مورد دوم
  • مورد سوم
  • یک آیتم
  • یک مورد دوم
  • مورد سوم
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

کلاس های متنی

از کلاس های متنی برای استایل دادن به آیتم های لیست با پس زمینه و رنگ حالت دار استفاده کنید.

  • یک آیتم لیست پیش فرض ساده
  • یک آیتم ساده در لیست اولیه
  • یک آیتم گروهی ساده ثانویه
  • یک آیتم ساده لیست موفقیت در گروه
  • یک آیتم گروهی لیست خطر ساده
  • یک آیتم گروهی لیست هشدار ساده
  • یک آیتم گروهی لیست اطلاعات ساده
  • یک آیتم گروهی لیست نور ساده
  • یک آیتم ساده گروه لیست تاریک
<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

کلاس های متنی نیز با .list-group-item-action. به اضافه کردن سبک های شناور در اینجا توجه کنید که در مثال قبلی وجود ندارد. همچنین .activeدولت پشتیبانی می شود. آن را برای نشان دادن یک انتخاب فعال در یک آیتم گروه فهرست متنی اعمال کنید.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
انتقال معنا به فناوری های کمکی

استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .visually-hiddenکلاس، گنجانده شده است.

با نشان ها

برای نشان دادن تعداد خوانده نشده، فعالیت و موارد دیگر با کمک برخی ابزارهای کمکی، نشان‌ها را به هر مورد از گروه فهرست اضافه کنید .

  • یک آیتم لیست14
  • مورد دوم لیست2
  • مورد سوم لیست1
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

محتوای دلخواه

تقریباً هر HTML را در داخل اضافه کنید، حتی برای گروه های لیست پیوندی مانند زیر، با کمک ابزارهای flexbox .

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

چک باکس ها و رادیوها

چک باکس‌ها و رادیوهای Bootstrap را در لیست موارد گروه قرار دهید و در صورت نیاز سفارشی کنید. شما می توانید آنها را بدون <label>s استفاده کنید، اما لطفاً به یاد داشته باشید که یک aria-labelویژگی و مقدار برای دسترسی داشته باشید.

  • اول چک باکس
  • چک باکس دوم
  • چک باکس سوم
  • چک باکس چهارم
  • چک باکس پنجم
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

و اگر می‌خواهید <label>s را به‌عنوان .list-group-itemمنطقه‌ای با ضربه بزرگ انتخاب کنید، می‌توانید این کار را نیز انجام دهید.

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

ساس

متغیرها

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

مخلوط ها

در ترکیب با $theme-colorsبرای تولید کلاس های متغیر متنی برای .list-group-items استفاده می شود.

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

حلقه

حلقه ای که کلاس های اصلاح کننده را با list-group-item-variant()mixin تولید می کند.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

رفتار جاوا اسکریپت

از افزونه جاوا اسکریپت زبانه استفاده کنید - آن را به صورت جداگانه یا از طریق bootstrap.jsفایل کامپایل شده اضافه کنید - تا گروه لیست خود را برای ایجاد صفحات جدولی از محتوای محلی گسترش دهید.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

استفاده از ویژگی های داده

شما می توانید ناوبری گروه لیست را بدون نوشتن جاوا اسکریپت به سادگی با تعیین data-bs-toggle="list"یا روی یک عنصر فعال کنید. از این ویژگی های داده در استفاده .list-group-itemکنید.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

از طریق جاوا اسکریپت

آیتم فهرست جدولی را از طریق جاوا اسکریپت فعال کنید (هر مورد لیست باید به صورت جداگانه فعال شود):

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">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

مواد و روش ها

constructor

یک عنصر فهرست و محفظه محتوا را فعال می کند. Tab باید دارای یک data-bs-targetیا یک hrefگره کانتینری در DOM باشد.

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

نشان می دهد

مورد لیست داده شده را انتخاب می کند و صفحه مربوط به آن را نشان می دهد. هر مورد دیگری از لیست که قبلا انتخاب شده بود، غیرانتخاب می شود و صفحه مرتبط با آن پنهان می شود. قبل از اینکه صفحه برگه واقعاً نشان داده شود (مثلاً قبل از shown.bs.tabوقوع رویداد) به تماس گیرنده برمی گردد.

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  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

مناسبت ها

هنگام نمایش یک برگه جدید، رویدادها به ترتیب زیر فعال می شوند:

  1. hide.bs.tab(در برگه فعال فعلی)
  2. show.bs.tab(در برگه برای نشان دادن)
  3. hidden.bs.tab(در برگه فعال قبلی، همان برگه hide.bs.tabرویداد)
  4. shown.bs.tab(در برگه تازه نشان داده شده فعال، همان برگه show.bs.tabرویداد)

اگر هیچ برگه ای از قبل فعال نبوده است، hide.bs.tabو hidden.bs.tabرویدادها فعال نمی شوند.

نوع رویداد شرح
show.bs.tab این رویداد در نمایش برگه فعال می شود، اما قبل از اینکه برگه جدید نشان داده شود. از event.targetو event.relatedTargetبرای هدف قرار دادن برگه فعال و برگه فعال قبلی (در صورت موجود بودن) استفاده کنید.
shown.bs.tab این رویداد پس از نمایش یک برگه در نمایش برگه فعال می شود. از event.targetو event.relatedTargetبرای هدف قرار دادن برگه فعال و برگه فعال قبلی (در صورت موجود بودن) استفاده کنید.
hide.bs.tab این رویداد زمانی فعال می شود که یک برگه جدید نشان داده شود (و بنابراین باید برگه فعال قبلی پنهان شود). به ترتیب از برگه فعال فعلی و برگه جدید که به زودی فعال می شود استفاده کنید event.targetو آن را هدف قرار دهید.event.relatedTarget
hidden.bs.tab این رویداد پس از نمایش یک برگه جدید فعال می شود (و بنابراین تب فعال قبلی پنهان می شود). به ترتیب از event.targetو event.relatedTargetبرای هدف قرار دادن تب فعال قبلی و تب فعال جدید استفاده کنید.
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}