in English

ଗୋଷ୍ଠୀ ତାଲିକା |

ତାଲିକା ଗୋଷ୍ଠୀଗୁଡ଼ିକ ଏକ ବିଷୟବସ୍ତୁ ପ୍ରଦର୍ଶନ ପାଇଁ ଏକ ନମନୀୟ ଏବଂ ଶକ୍ତିଶାଳୀ ଉପାଦାନ | ଭିତରର ଯେକ content ଣସି ବିଷୟବସ୍ତୁକୁ ସମର୍ଥନ କରିବାକୁ ସେମାନଙ୍କୁ ପରିବର୍ତ୍ତନ ଏବଂ ବିସ୍ତାର କର |

ମ Basic ଳିକ ଉଦାହରଣ |

ସବୁଠାରୁ ମ basic ଳିକ ତାଲିକା ଗୋଷ୍ଠୀ ହେଉଛି ତାଲିକା ଆଇଟମ୍ ଏବଂ ଉପଯୁକ୍ତ ଶ୍ରେଣୀ ସହିତ ଏକ ଅନିୟମିତ ତାଲିକା | ଅନୁସରଣ କରୁଥିବା ବିକଳ୍ପଗୁଡ଼ିକ ସହିତ, କିମ୍ବା ଆବଶ୍ୟକ ଅନୁଯାୟୀ ନିଜସ୍ୱ 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 ପାଇଁ ଏକ ଯୋଗକର | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ କିଛି ଉପାଦାନ ସହିତ ସେମାନଙ୍କର କ୍ଲିକ୍ ଇଭେଣ୍ଟଗୁଡିକ (ଯଥା, ଲିଙ୍କ୍) ସଂପୂର୍ଣ୍ଣ ଅକ୍ଷମ କରିବାକୁ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ମଧ୍ୟ ଆବଶ୍ୟକ କରିବ |.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 କିମ୍ବା 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>ବ୍ୟବହାର ମଧ୍ୟ କରିପାରିବେ | ଦୁ ly ଖର ବିଷୟ, ଅକ୍ଷମ ଗୁଣକୁ ସମର୍ଥନ କରେ ନାହିଁ |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}ବ ly କଳ୍ପିକ ଭାବରେ, ସେହି ବ୍ରେକପଏଣ୍ଟରୁ ଆରମ୍ଭ କରି ଏକ ତାଲିକା ଗୋଷ୍ଠୀକୁ ଭୂସମାନ୍ତର କରିବାକୁ ଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ ପ୍ରକାର ବାଛନ୍ତୁ min-width| ସମ୍ପ୍ରତି ଭୂସମାନ୍ତର ତାଲିକା ଗୋଷ୍ଠୀଗୁଡିକ ଫ୍ଲାଶ୍ ତାଲିକା ଗୋଷ୍ଠୀ ସହିତ ମିଳିତ ହୋଇପାରିବ ନାହିଁ |

ProTip: ଭୂସମାନ୍ତର ସମୟରେ ସମାନ ଓସାର ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ ଚାହୁଁଛନ୍ତି କି? .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>

ବିଷୟବସ୍ତୁ ଶ୍ରେଣୀଗୁଡିକ |

ଏକ ରାଜ୍ୟ ପୃଷ୍ଠଭୂମି ଏବଂ ରଙ୍ଗ ସହିତ ଆଇଟମ୍ ତାଲିକା ଶ style ଳୀ ପାଇଁ ପ୍ରସଙ୍ଗ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ |

  • ଏକ ସରଳ ଡିଫଲ୍ଟ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
  • ଏକ ସରଳ ପ୍ରାଥମିକ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
  • ଏକ ସରଳ ଦଳୀୟ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
  • ଏକ ସରଳ ସଫଳତା ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
  • ଏକ ସରଳ ବିପଦ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
  • ଏକ ସରଳ ଚେତାବନୀ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
  • ଏକ ସରଳ ସୂଚନା ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
  • ଏକ ସରଳ ଆଲୋକ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
  • ଏକ ସରଳ ଗା dark ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
<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| ପୂର୍ବ ଉଦାହରଣରେ ଉପସ୍ଥିତ ନଥିବା ହୋଭର ଶ yles ଳୀଗୁଡ଼ିକର ଯୋଗକୁ ଧ୍ୟାନ ଦିଅନ୍ତୁ | ରାଜ୍ୟ ମଧ୍ୟ ସମର୍ଥିତ .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ଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |

ବ୍ୟାଜ୍ ସହିତ |

କିଛି ଉପଯୋଗିତା ସାହାଯ୍ୟରେ ପ read ଼ାଯାଇଥିବା ଗଣନା, କାର୍ଯ୍ୟକଳାପ, ଏବଂ ଅଧିକ ଦେଖାଇବାକୁ ଯେକ any ଣସି ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମରେ ବ୍ୟାଜ୍ ଯୋଡନ୍ତୁ |

  • ଏକ ତାଲିକା ଆଇଟମ୍ |14
  • ଦ୍ୱିତୀୟ ତାଲିକା ଆଇଟମ୍ |
  • ଏକ ତୃତୀୟ ତାଲିକା ଆଇଟମ୍ |
<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>

କଷ୍ଟମ୍ ବିଷୟବସ୍ତୁ |

ଫ୍ଲେକ୍ସବକ୍ସ ୟୁଟିଲିଟିଜ୍ ସାହାଯ୍ୟରେ ନିମ୍ନରେ ଥିବା ଲିଙ୍କ୍ ଗୋଷ୍ଠୀ ପାଇଁ ମଧ୍ୟ ପ୍ରାୟ ଯେକ HTML ଣସି HTML ଯୋଡନ୍ତୁ |

<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ଫାଇଲ୍ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ - ସ୍ଥାନୀୟ ବିଷୟବସ୍ତୁର ଟ୍ୟାବଲ୍ ଟେବୁଲ୍ ତିଆରି କରିବାକୁ ଆମର ତାଲିକା ଗୋଷ୍ଠୀକୁ ବିସ୍ତାର କରିବାକୁ |

<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"ଆପଣ କେବଳ ନିର୍ଦ୍ଦିଷ୍ଟ କିମ୍ବା ଏକ ଉପାଦାନରେ କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟ ଲେଖି ବିନା ଏକ ତାଲିକା ଗୋଷ୍ଠୀ ନ���ଭିଗେସନ୍ ସକ୍ରିୟ କରିପାରିବେ | ଏହି ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ .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>

.tab ('ଶୋ')

ପ୍ରଦତ୍ତ ତାଲିକା ଆଇଟମ୍ ଚୟନ କରେ ଏବଂ ଏହାର ସଂପୃକ୍ତ ପେନ୍ ଦେଖାଏ | ଅନ୍ୟ କ list ଣସି ତାଲିକା ଆଇଟମ୍ ଯାହା ପୂର୍ବରୁ ମନୋନୀତ ହୋଇଥିଲା ତାହା ଅଣ-ମନୋନୀତ ହୋଇଯାଏ ଏବଂ ଏହାର ସଂପୃକ୍ତ ପେନ୍ ଲୁଚି ରହିଥାଏ | ଟ୍ୟାବ୍ ପେନ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଥାଏ (ଉଦାହରଣ ସ୍ୱରୂପ, shown.bs.tabଘଟଣା ଘଟିବା ପୂର୍ବରୁ) |

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

ଘଟଣା

ଏକ ନୂତନ ଟ୍ୟାବ୍ ଦେଖାଇବାବେଳେ, ଘଟଣାଗୁଡ଼ିକ ନିମ୍ନ କ୍ରମରେ ନିଆଁ ଲାଗେ:

  1. hide.bs.tab(ସାମ୍ପ୍ରତିକ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଉପରେ)
  2. show.bs.tab(ଦେଖାଯିବାକୁ ଥିବା ଟ୍ୟାବ୍ ଉପରେ)
  3. hidden.bs.tab(ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବରେ, hide.bs.tabଇଭେଣ୍ଟ ପାଇଁ ସମାନ)
  4. shown.bs.tab(ନୂତନ-ସକ୍ରିୟ କେବଳ ପ୍ରଦର୍ଶିତ ଟ୍ୟାବରେ, show.bs.tabଇଭେଣ୍ଟ ପାଇଁ ସମାନ)

ଯଦି କ tab ଣସି ଟ୍ୟାବ୍ ପୂର୍ବରୁ ସକ୍ରିୟ ନଥିଲା, hide.bs.tabଏବଂ hidden.bs.tabଇଭେଣ୍ଟଗୁଡିକ ଫାୟାର୍ ହେବ ନାହିଁ |

ଇଭେଣ୍ଟ ପ୍ରକାର | ବର୍ଣ୍ଣନା
show.bs.tab ଏହି ଇଭେଣ୍ଟ ଟ୍ୟାବ୍ ଶୋରେ ନିଆଁ ଲାଗେ, କିନ୍ତୁ ନୂଆ ଟ୍ୟାବ୍ ଦେଖାଯିବା ପୂର୍ବରୁ | ଯଥାକ୍ରମେ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଏବଂ ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ (ଯଦି ଉପଲବ୍ଧ) ବ୍ୟବହାର କରନ୍ତୁ event.targetଏବଂ ଟାର୍ଗେଟ୍ କରନ୍ତୁ |event.relatedTarget
show.bs.tab ଏକ ଟ୍ୟାବ୍ ଦେଖାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ଟ୍ୟାବ୍ ସୋରେ ନିଆଁ ଲାଗେ | ଯଥାକ୍ରମେ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଏବଂ ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ (ଯଦି ଉପଲବ୍ଧ) ବ୍ୟବହାର କରନ୍ତୁ event.targetଏବଂ ଟାର୍ଗେଟ୍ କରନ୍ତୁ |event.relatedTarget
hide.bs.tab ଯେତେବେଳେ ଏକ ନୂତନ ଟ୍ୟାବ୍ ଦେଖାଯିବାକୁ ହେବ (ଏବଂ ଏହିପରି ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଲୁକ୍କାୟିତ ହେବ) ଏହି ଘଟଣାଟି ଅଗ୍ନି ସଂଯୋଗ କରେ | ସାମ୍ପ୍ରତିକ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଏବଂ ନୂତନ ଶୀଘ୍ର-ସକ୍ରିୟ ହେବାକୁ ଥିବା ଟ୍ୟାବ୍ ଯଥାକ୍ରମେ ବ୍ୟବହାର କରନ୍ତୁ event.targetଏବଂ ଟାର୍ଗେଟ୍ କରନ୍ତୁ |event.relatedTarget
hidden.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
})