twitter-bootstrap
टैब्स

मूल HTML

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation">
    <a href="#id-of-content-1" role="tab" data-toggle="tab">Tab 1</a>
  </li>
  <li role="presentation">
    <a href="#id-of-content-2" role="tab" data-toggle="tab">Tab 2</a>
  </li>
  <li role="presentation">
    <a href="#id-of-content-3" role="tab" data-toggle="tab">Tab 3</a>
  </li>
</ul>

<div class="tab-content">
  <div role="tabpanel" id="id-of-content-1" class="tab-pane">Tab content 1</div>
  <div role="tabpanel" id="id-of-content-2" class="tab-pane">Tab content 2</div>
  <div role="tabpanel" id="id-of-content-3" class="tab-pane">Tab content 3</div>
</div>

यह 3 टैब और 3 संबंधित सामग्री divs के साथ एक टैब सेट बनाएगा।

एनिमेटेड टैब

टैब में फीका करने के लिए, जोड़ने .fade प्रत्येक के लिए .tab-pane । सक्रिय टैब फलक में प्रारंभिक सामग्री दिखाई देने के लिए .in वर्ग भी होना चाहिए।

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation">
        <a href="#id-of-content-1" role="tab" data-toggle="tab">
            Tab 1
        </a>
    </li>
    <li role="presentation" class="active">
        <a href="#id-of-content-2" role="tab" data-toggle="tab">
            Tab 2
        </a>
    </li>
    <li role="presentation">
        <a href="#id-of-content-3" role="tab" data-toggle="tab">
            Tab 3
        </a>
    </li>
</ul>

<div class="tab-content">
    <div role="tabpanel" id="id-of-content-1" class="tab-pane fade">
        Tab content 1
    </div>
    <div role="tabpanel" id="id-of-content-2" class="tab-pane fade active in">
        Tab content 2
    </div>
    <div role="tabpanel" id="id-of-content-3" class="tab-pane fade">
        Tab content 3
    </div>
</div>