Source

Ŋlɔ ƒuƒoƒoa ɖi

List groups nye akpa si te ŋu trɔna bɔbɔe eye ŋusẽ le eŋu hena nyatakaka siwo kplɔ wo nɔewo ɖo ɖeɖefia. Trɔ asi le wo ŋu eye nàkeke wo ɖe enu be woado alɔ nyatakaka ɖesiaɖe kloe si le eme.

Kpɔɖeŋu vevi aɖe

xexlẽdzesiwo ƒe ƒuƒoƒo vevitɔ kekeakee nye xexlẽdzesi siwo womeɖo ɖe ɖoɖo nu o si me xexlẽdzesiwo ƒe nuawo kple klass siwo sɔ le. Tu ɖe edzi kple tiatia siwo kplɔe ɖo, alo kple wò ŋutɔ wò CSS ne ehiã.

  • Cras justo odio ƒe nyawo
  • Dapibus ac ƒe dɔwɔƒe le
  • Morbi leo ƒe ƒuƒoƒo
  • Porta ac ƒe ƒuƒoƒo ac
  • Vestibulum le eros dzi
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Nusiwo le dɔ wɔm

Tsɔ kpe .activeɖe a .list-group-itemŋu nàtsɔ afia tiatia si le dɔ wɔm fifia.

  • Cras justo odio ƒe nyawo
  • Dapibus ac ƒe dɔwɔƒe le
  • Morbi leo ƒe ƒuƒoƒo
  • Porta ac ƒe ƒuƒoƒo ac
  • Vestibulum le eros dzi
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Nu siwo wowɔ nuwɔametɔwoe

Tsɔ kpe .disabledɖe a .list-group-itemŋu be wòadze abe nuwɔametɔ ene. De dzesii be nu aɖewo siwo le .disabledhã abia JavaScript si wowɔ ɖe ɖoɖo nu be woawɔ woƒe nuƒoƒo ƒe nudzɔdzɔwo ŋudɔ bliboe (le kpɔɖeŋu me, kadodowo).

  • Cras justo odio ƒe nyawo
  • Dapibus ac ƒe dɔwɔƒe le
  • Morbi leo ƒe ƒuƒoƒo
  • Porta ac ƒe ƒuƒoƒo ac
  • Vestibulum le eros dzi
<ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Zã <a>s alo <button>s nàtsɔ awɔ xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nusiwo ŋu woate ŋu awɔ dɔ le kple hover, disabled, kple active states to .list-group-item-action. Míeɖea pseudo-klass siawo ɖe vovo be míakpɔ egbɔ be xexlẽdzesi ƒuƒoƒo siwo wotsɔ nusiwo mewɔa dɔ o (abe <li>s alo <div>s ene) wɔ la mena click alo tap affordance o.

Kpɔ egbɔ be yemezã klass siwo wozãna ɖaa .btnle afisia o .

Cras justo odio ƒe nyawo Dapibus ac ƒe dɔwɔƒe le Morbi leo ƒe ƒuƒoƒo Porta ac ƒe ƒuƒoƒo ac Vestibulum le eros dzi 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>

Ne èzã <button>s la, àte ŋu azã disablednɔnɔmea hã ɖe .disabledklass la teƒe. Nublanuitɔe la, <a>s medoa alɔ nɔnɔme si nye nuwɔametɔ la o.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

Klɔe

Tsɔ kpe ɖe eŋu .list-group-flushbe nàɖe liƒo aɖewo kple dzogoe siwo le goglo la ɖa be nàɖe xexlẽdzesiwo ƒe ƒuƒoƒo me nuawo afia tso nugbɔ vaseɖe nugbɔ le dzila ƒe nugoe me (le kpɔɖeŋu me, kaɖiwo).

  • Cras justo odio ƒe nyawo
  • Dapibus ac ƒe dɔwɔƒe le
  • Morbi leo ƒe ƒuƒoƒo
  • Porta ac ƒe ƒuƒoƒo ac
  • Vestibulum le eros dzi
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Klass siwo ku ɖe nya siwo ƒo xlãe ŋu

Zã nya siwo ƒo xlãe ƒe klasswo nàtsɔ awɔ atsyã ŋlɔ nusiwo ŋu nɔnɔme kple amadede le.

  • Dapibus ac ƒe dɔwɔƒe le
  • Nu bɔbɔe aɖe si woŋlɔ ɖe xexlẽdzesi gbãtɔ me ƒe ƒuƒoƒo me nu
  • Nu bɔbɔe aɖe si nye evelia ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu
  • Dzidzedzekpɔkpɔ ƒe xexlẽdzesi ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe
  • Afɔkuwo ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe
  • Nuxlɔ̃ame ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe
  • A simple info list ƒuƒoƒo ƒe nu
  • Kekeli ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe
  • Viviti me xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</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>

Nya siwo ƒo xlãe ƒe klasswo hã wɔa dɔ kple .list-group-item-action. De dzesi hover ƒe atsyã siwo wotsɔ kpe ɖe eŋu le afisia si mele kpɔɖeŋu si do ŋgɔ me o. Dukɔa hã doa alɔe .active; zãe nàtsɔ afia tiatia aɖe si le dɔ wɔm le nya siwo ƒo xlãe ƒe ƒuƒoƒo ƒe nya aɖe dzi.

Dapibus ac ƒe dɔwɔƒe le Nu bɔbɔe aɖe si woŋlɔ ɖe xexlẽdzesi gbãtɔ me ƒe ƒuƒoƒo me nu Nu bɔbɔe aɖe si nye evelia ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu Dzidzedzekpɔkpɔ ƒe xexlẽdzesi ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe Afɔkuwo ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe Nuxlɔ̃ame ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe A simple info list ƒuƒoƒo ƒe nu Kekeli ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe Viviti me xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</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>
Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla kple .sr-onlyklass la ene.

Kple akɔtagbalẽviwo

Tsɔ akɔtagbalẽviwo kpe ɖe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu ɖesiaɖe ŋu be nàɖe xexlẽme siwo womexlẽ o, dɔwɔnawo, kple bubuwo afia to dɔwɔnu aɖewo ƒe kpekpeɖeŋu me .

  • Cras justo odio ƒe nyawo14
  • Dapibus ac ƒe dɔwɔƒe le2.
  • Morbi leo ƒe ƒuƒoƒo1. 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Nyatakaka siwo wowɔ ɖe ɖoɖo nu

Tsɔ HTML ɖesiaɖe kloe kpe ɖe eŋu le eme, na xexlẽdzesiwo ƒe ƒuƒoƒo siwo do ƒome kplii abe esi le ete ene gɔ̃ hã, to flexbox dɔwɔnuwo ƒe kpekpeɖeŋu me .

Ŋlɔ ƒuƒoƒoa ƒe nu ƒe tanya
Ŋkeke 3 enye sia

Donec id elit non mi porta gravida le eget metus me. Maecenas sed diam eget risus ƒomevi aɖe si woyɔna be blandit.

Donec id elit si menye mi porta o.
Ŋlɔ ƒuƒoƒoa ƒe nu ƒe tanya
Ŋkeke 3 enye sia

Donec id elit non mi porta gravida le eget metus me. Maecenas sed diam eget risus ƒomevi aɖe si woyɔna be blandit.

Donec id elit si menye mi porta o.
Ŋlɔ ƒuƒoƒoa ƒe nu ƒe tanya
Ŋkeke 3 enye sia

Donec id elit non mi porta gravida le eget metus me. Maecenas sed diam eget risus ƒomevi aɖe si woyɔna be blandit.

Donec id elit si menye mi porta o. 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start 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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

JavaScript ƒe nuwɔna

Zã tab JavaScript plugin—de eme ɖekaɖeka alo to bootstrap.jsfaɛl si woƒo ƒu dzi—be nàkeke míaƒe xexlẽdzesiwo ƒe ƒuƒoƒoa ɖe enu be nàwɔ teƒea me nyatakakawo ƒe akpa siwo woate ŋu aƒo tab ɖo.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa aɖuɖɔtoe kamedede fugiat ɣeyiɣi kpui aɖe. Voluptate deserunt bɔbɔ nɔ anyi sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim ɣeyiɣi kpui aɖe sunt voluptate consectetur kamedede id ut nulla. Ea kple fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua le cupidatat me kple nu siwo wotsɔ wɔa nuɖuɖui ƒe nu suetɔ kekeake.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

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

Nyatakaka ƒe nɔnɔmewo zazã

Àteŋu awɔ xexlẽdzesiwo ƒe ƒuƒoƒo ƒe mɔfiame ŋudɔ JavaScript aɖeke maŋlɔ to nya aɖe gbɔgblɔ data-toggle="list"alo ɖe element aɖe dzi ko me. Zã nyatakaka ƒe nɔnɔme siawo le .list-group-item.

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

To JavaScript dzi

Na tabbable list item nawɔ dɔ to JavaScript dzi (ele be woawɔ list item ɖesiaɖe ŋudɔ ɖekaɖeka):

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

Àte ŋu awɔ xexlẽdzesi ɖekaɖeka ƒe nu ŋudɔ le mɔ vovovowo nu:

$('#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 ƒe ŋusẽkpɔɖeamedzi

Be nàna tabs panel naɖiɖi la, tsɔe kpe .fadeɖe wo dometɔ ɖesiaɖe .tab-paneŋu . Ele be tab ƒe akpa gbãtɔ hã .shownana nya siwo le gɔmedzedzea me la nadze.

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

Mɔnuwo

$().tab ƒe ƒuƒoƒo

Ewɔa xexlẽdzesi ƒe nu ƒe akpa aɖe kple emenyawo ƒe nugoe ŋudɔ. Ele be tab nanye a data-targetalo hreftaɖodzinu si nye container node le DOM la me.

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

.tab('ɖee fia')

Tia xexlẽdzesi si wona eye nàɖe eƒe akpa si do ƒome kplii afia. Nu bubu ɖesiaɖe si woŋlɔ ɖe xexlẽdzesiwo me si wotia va yi la va zua esi wometia o eye eƒe akpa si do ƒome kplii la ɣlana. Trɔ yi yɔla gbɔ hafi woɖe tab ƒe akpaa fia ŋutɔŋutɔ (le kpɔɖeŋu me, hafi shown.bs.tabnudzɔdzɔa nadzɔ).

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

Nudzɔdzɔwo

Ne èle tab yeye aɖe ɖem fia la, nudzɔdzɔawo dzona le ɖoɖo si gbɔna nu:

  1. hide.bs.tab(le tab si le dɔ wɔm fifia dzi)
  2. show.bs.tab(le tab si woaɖe afia la dzi)
  3. hidden.bs.tab(le tab si le dɔ wɔm va yi dzi la, esi le hide.bs.tabnudzɔdzɔa gome la ke)
  4. shown.bs.tab(le tab si woɖe fia teti koe nye ema si le dɔ wɔm yeyee la dzi la, esi sɔ kple esi wowɔ na show.bs.tabwɔnaa tɔ)

Ne tab aɖeke menɔ dɔ wɔm xoxo o la, womaɖe hide.bs.tabkple nudzɔdzɔawo o.hidden.bs.tab

Nudzɔdzɔ ƒomevi Nuɖᴐɖᴐ
ɖee fia.bs.tab Nudzɔdzɔ sia dzona le tab show dzi, gake hafi woaɖe tab yeyea afia. Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome.
woɖe fia.bs.tab Nudzɔdzɔ sia dzona le tab ɖeɖefia me ne woɖe tab aɖe fia vɔ. Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome.
ɣla.bs.tab la Nudzɔdzɔ sia doa dzo ne woaɖe tab yeye aɖe afia (eye to esia me la, woaɣla tab si le dɔ wɔm va yi). Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm fifia kple tab yeye si awɔ dɔ kpuie la, ɖe wo nɔewo yome.
ɣaɣla.bs.tab Nudzɔdzɔ sia dzona ne woɖe tab yeye aɖe fia vɔ (eye to esia me la, woɣla tab si le dɔ wɔm va yi). Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm va yi kple tab yeye si le dɔ wɔm la, ɖe wo nɔewo yome. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})