የዝርዝር ቡድን

የዝርዝር ቡድኖች ተከታታይ ይዘትን ለማሳየት ተለዋዋጭ እና ኃይለኛ አካል ናቸው። በውስጡ ማንኛውንም ይዘት ለመደገፍ ያሻሽሏቸው እና ያራዝሙ።

መሰረታዊ ምሳሌ

በጣም መሠረታዊው የዝርዝር ቡድን ከዝርዝር እቃዎች እና ትክክለኛ ክፍሎች ጋር ያልተያዘ ዝርዝር ነው. በእሱ ላይ በሚቀጥሉት አማራጮች ወይም እንደ አስፈላጊነቱ በራስዎ 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አክል ።.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 ወደ አክል ። አንዳንድ አባላቶች ያላቸው የጠቅ ክስተቶቻቸውን (ለምሳሌ አገናኞችን) ሙሉ ለሙሉ ለማሰናከል ብጁ ጃቫስክሪፕት እንደሚያስፈልጋቸው ልብ ይበሉ።.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>

አገናኞች እና አዝራሮች

በማንዣበብ፣ በአካል ጉዳተኞች እና በንቁ ግዛቶች ሊተገበሩ የሚችሉ የዝርዝር ዝርዝሮችን ለመፍጠር s <a>ወይም s ይጠቀሙ ። መስተጋብራዊ ካልሆኑ አካላት (እንደ s ወይም ዎች ያሉ) የተሰሩ የዝርዝር ቡድኖች አንድ ጠቅታ እንደማይሰጡ ለማረጋገጥ እነዚህን የውሸት ክፍሎችን እንለያቸዋለን።<button>.list-group-item-action<li><div>

እዚህ መደበኛ .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 class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

በ s፣ እንዲሁም ከክፍል ይልቅ ባህሪውን <button>መጠቀም ይችላሉ ። በሚያሳዝን ሁኔታ፣ የአካል ጉዳተኞችን ባህሪ አይደግፉም።disabled.disabled<a>

<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-horizontalየዝርዝር ቡድን ንጥሎችን አቀማመጥ በሁሉም መግቻ ነጥቦች ላይ ከቋሚ ወደ አግድም ለመቀየር ያክሉ ። .list-group-horizontal-{sm|md|lg|xl}በአማራጭ፣ የዝርዝር ቡድንን ከዚያ መግቻ ነጥብ ጀምሮ አግድም ለማድረግ ምላሽ ሰጪ ተለዋጭ ይምረጡ 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">
  <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>

ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት

ትርጉምን ለመጨመር ቀለምን መጠቀም ምስላዊ ማሳያን ብቻ ያቀርባል, ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች አይተላለፍም - እንደ ስክሪን አንባቢዎች. በቀለም የተወከለው መረጃ ከይዘቱ (ለምሳሌ ከሚታየው ጽሑፍ) ግልጽ መሆኑን ወይም በአማራጭ ዘዴዎች መካተቱን ያረጋግጡ፣ ለምሳሌ .sr-onlyከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።

ባጃጆች ጋር

በአንዳንድ መገልገያዎች እገዛ ያልተነበቡ ቆጠራዎችን፣ እንቅስቃሴዎችን እና ሌሎችንም ለማሳየት ባጆችን ወደ ማንኛውም የዝርዝር ቡድን ንጥል ነገር ያክሉ ።

ዝርዝር ንጥል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 badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

ብጁ ይዘት

በ flexbox መገልገያዎች እገዛ ከታች እንዳለው ላሉ የተገናኙ የዝርዝር ቡድኖችም ቢሆን በውስጡ ማንኛውንም HTML ያክሉ ።

የዝርዝር ቡድን ንጥል ርዕስ

ከ 3 ቀናት በፊት

አንዳንድ የቦታ ያዥ ይዘት በአንቀጽ ውስጥ።

እና ትንሽ ህትመት።

የዝርዝር ቡድን ንጥል ርዕስ

ከ 3 ቀናት በፊት

አንዳንድ የቦታ ያዥ ይዘት በአንቀጽ ውስጥ።

እና አንዳንዶቹ ድምጸ-ከል አድርገዋል ትንሽ ህትመት።

የዝርዝር ቡድን ንጥል ርዕስ

ከ 3 ቀናት በፊት

አንዳንድ የቦታ ያዥ ይዘት በአንቀጽ ውስጥ።

እና አንዳንዶቹ ድምጸ-ከል አድርገዋል ትንሽ ህትመት።

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <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.jsበተጠናቀረ ፋይል በኩል - የዝርዝር ቡድናችንን ለማራዘም የአካባቢያዊ ይዘቶችን ሊታዩ የሚችሉ ንጣፎችን ለመፍጠር።

ቤት መገለጫ መልዕክቶች ቅንብሮች

ከ"ቤት" ጋር በተዛመደ አንቀጽ ውስጥ ያለ የቦታ ያዥ ይዘት። እና አንዳንድ ተጨማሪ ይዘቶች፣ ይህን የትር ፓነል ለመሙላት እና ለመሙላት ብቻ እዚህ ጥቅም ላይ ይውላል። በምርት ውስጥ፣ እዚህ የበለጠ እውነተኛ ይዘት እንዳለህ ግልጽ ነው። እና ጽሑፍ ብቻ አይደለም. ምንም ሊሆን ይችላል, በእውነቱ. ጽሑፍ, ምስሎች, ቅጾች.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<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-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="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-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-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-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>

በጃቫስክሪፕት በኩል

በጃቫ ስክሪፕት ሊታዘር የሚችል የዝርዝር ንጥልን አንቃ (እያንዳንዱ የዝርዝር ንጥል በተናጠል መንቃት አለበት)

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

የግለሰብ ዝርዝር ንጥልን በተለያዩ መንገዶች ማግበር ይችላሉ፡-

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third 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>

ዘዴዎች

$() ትር

የዝርዝር ንጥል ነገር እና የይዘት መያዣን ያነቃል። ትር በ DOM ውስጥ የእቃ መያዣ መስቀለኛ መንገድ data-targetወይም ኢላማ ማድረግ አለበት።href

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.ታብ('አሳይ')

የተሰጠውን የዝርዝር ንጥል ይመርጣል እና የተያያዘውን መቃን ያሳያል። ከዚህ ቀደም የተመረጠ ማንኛውም ሌላ የዝርዝር ንጥል ነገር ያልተመረጠ ይሆናል እና ከእሱ ጋር የተያያዘው መቃን ይደበቃል። የትር መቃን በትክክል ከመታየቱ በፊት (ለምሳሌ shown.bs.tabክስተቱ ከመከሰቱ በፊት) ወደ ደዋይ ይመለሳል።

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

ክስተቶች

አዲስ ትር ሲያሳዩ ክስተቶቹ በሚከተለው ቅደም ተከተል ይቃጠላሉ፡

hide.bs.tab(በአሁኑ ንቁ ትር ላይ)
show.bs.tab(በሚታየው ትር ላይ)
hidden.bs.tab(በቀደመው ንቁ ትር ላይ፣ hide.bs.tabከዝግጅቱ ጋር አንድ አይነት)
shown.bs.tab(በአዲሱ የነቃ ትር ላይ፣ show.bs.tabከዝግጅቱ ጋር አንድ አይነት)

ምንም ትር አስቀድሞ ገባሪ ካልሆነ፣ hide.bs.tabእና hidden.bs.tabክስተቶቹ አይባረሩም።

የክስተት አይነት	መግለጫ
አሳይ.bs.tab	ይህ ክስተት በትር ትዕይንት ላይ ይቃጠላል፣ ነገር ግን አዲሱ ትር ከመታየቱ በፊት። `event.target`ገባሪውን ትር እና `event.relatedTarget`የቀደመውን ገባሪ ትር (ካለ) በቅደም ተከተል ዒላማ ለማድረግ ይጠቀሙ ።
የሚታየው.bs.tab	ይህ ክስተት ትር ከታየ በኋላ በትብ ትዕይንት ላይ ይቀጣጠላል። `event.target`ገባሪውን ትር እና `event.relatedTarget`የቀደመውን ገባሪ ትር (ካለ) በቅደም ተከተል ዒላማ ለማድረግ ይጠቀሙ ።
ደብቅ.bs.tab	ይህ ክስተት የሚቀጣጠለው አዲስ ትር በሚታይበት ጊዜ ነው (እና ስለዚህ የቀደመው ገቢር ትር መደበቅ አለበት)። እንደቅደም ተከተላቸው የአሁኑን ገቢር ትር እና አዲሱን በቅርቡ የሚሠራውን ትር ይጠቀሙ `event.target`እና ለማነጣጠር።`event.relatedTarget`
የተደበቀ.bs.tab	ይህ ክስተት የሚቀጣጠለው አዲስ ትር ከታየ በኋላ ነው (እና ስለዚህ ቀዳሚው ንቁ ትር ተደብቋል)። የቀደመውን ገባሪ ትር እና አዲሱን ገባሪ ትር በቅደም ተከተል ይጠቀሙ `event.target`እና `event.relatedTarget`ለማነጣጠር።

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