ਨੇਵਸ

ਬੂਟਸਟਰੈਪ ਦੇ ਸ਼ਾਮਲ ਨੈਵੀਗੇਸ਼ਨ ਕੰਪੋਨੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ।

ਅਧਾਰ ਨੈਵ

.navਬੂਟਸਟਰੈਪ ਵਿੱਚ ਉਪਲਬਧ ਨੈਵੀਗੇਸ਼ਨ ਬੇਸ ਕਲਾਸ ਤੋਂ ਸਰਗਰਮ ਅਤੇ ਅਯੋਗ ਅਵਸਥਾਵਾਂ ਤੱਕ, ਆਮ ਮਾਰਕਅਪ ਅਤੇ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸਾਂਝਾ ਕਰਦਾ ਹੈ। ਹਰੇਕ ਸ਼ੈਲੀ ਦੇ ਵਿਚਕਾਰ ਅਦਲਾ-ਬਦਲੀ ਕਰਨ ਲਈ ਸੋਧਕ ਕਲਾਸਾਂ ਨੂੰ ਸਵੈਪ ਕਰੋ।

ਬੇਸ .navਕੰਪੋਨੈਂਟ ਫਲੈਕਸਬਾਕਸ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ ਅਤੇ ਹਰ ਕਿਸਮ ਦੇ ਨੈਵੀਗੇਸ਼ਨ ਕੰਪੋਨੈਂਟ ਬਣਾਉਣ ਲਈ ਇੱਕ ਮਜ਼ਬੂਤ ਬੁਨਿਆਦ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਕੁਝ ਸਟਾਈਲ ਓਵਰਰਾਈਡ (ਸੂਚੀਆਂ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ), ਵੱਡੇ ਹਿੱਟ ਖੇਤਰਾਂ ਲਈ ਕੁਝ ਲਿੰਕ ਪੈਡਿੰਗ, ਅਤੇ ਬੁਨਿਆਦੀ ਅਸਮਰਥਿਤ ਸਟਾਈਲਿੰਗ ਸ਼ਾਮਲ ਹਨ।

ਬੇਸ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਕੋਈ ਰਾਜ .navਸ਼ਾਮਲ ਨਹੀਂ ਹੁੰਦਾ । .activeਨਿਮਨਲਿਖਤ ਉਦਾਹਰਨਾਂ ਵਿੱਚ ਕਲਾਸ ਸ਼ਾਮਲ ਹੈ, ਮੁੱਖ ਤੌਰ 'ਤੇ ਇਹ ਦਰਸਾਉਣ ਲਈ ਕਿ ਇਹ ਵਿਸ਼ੇਸ਼ ਕਲਾਸ ਕਿਸੇ ਵਿਸ਼ੇਸ਼ ਸਟਾਈਲਿੰਗ ਨੂੰ ਚਾਲੂ ਨਹੀਂ ਕਰਦੀ ਹੈ।

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ਕਲਾਸਾਂ ਦੌਰਾਨ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ, ਇਸਲਈ ਤੁਹਾਡਾ ਮਾਰਕਅੱਪ ਬਹੁਤ ਲਚਕਦਾਰ ਹੋ ਸਕਦਾ ਹੈ। ਜੇਕਰ ਤੁਹਾਡੀਆਂ ਆਈਟਮਾਂ ਦਾ ਕ੍ਰਮ ਮਹੱਤਵਪੂਰਨ ਹੈ <ul>, ਤਾਂ ਉੱਪਰ ਦਿੱਤੇ ਵਾਂਗ s ਦੀ ਵਰਤੋਂ ਕਰੋ , ਜਾਂ ਕਿਸੇ ਤੱਤ ਨਾਲ ਆਪਣੀ ਖੁਦ ਦੀ ਰੋਲ ਕਰੋ। ਕਿਉਂਕਿ ਵਰਤੋਂ , ਨੈਵੀ ਲਿੰਕ ਉਸੇ ਤਰ੍ਹਾਂ ਦਾ ਵਿਵਹਾਰ ਕਰਦੇ ਹਨ ਜਿਵੇਂ ਕਿ nav ਆਈਟਮਾਂ ਹੁੰਦੀਆਂ ਹਨ, ਪਰ ਵਾਧੂ ਮਾਰਕਅੱਪ ਤੋਂ ਬਿਨਾਂ।<ol><nav>.navdisplay: flex

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

ਉਪਲਬਧ ਸ਼ੈਲੀਆਂ

.navਸੰਸ਼ੋਧਕਾਂ ਅਤੇ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨਾਲ s ਕੰਪੋਨੈਂਟ ਦੀ ਸ਼ੈਲੀ ਨੂੰ ਬਦਲੋ । ਲੋੜ ਅਨੁਸਾਰ ਮਿਲਾਓ ਅਤੇ ਮੇਲ ਕਰੋ, ਜਾਂ ਆਪਣਾ ਬਣਾਓ।

ਹਰੀਜ਼ੱਟਲ ਅਲਾਈਨਮੈਂਟ

flexbox ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਆਪਣੀ nav ਦੀ ਲੇਟਵੀਂ ਅਲਾਈਨਮੈਂਟ ਬਦਲੋ । ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ, ਨੈਵ ਖੱਬੇ-ਅਲਾਈਨ ਹੁੰਦੇ ਹਨ, ਪਰ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਕੇਂਦਰ ਜਾਂ ਸੱਜੇ ਇਕਸਾਰ ਵਿੱਚ ਬਦਲ ਸਕਦੇ ਹੋ।

ਇਸ ਨਾਲ ਕੇਂਦਰਿਤ .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ਇਸ ਨਾਲ ਸੱਜੇ-ਸੰਗਠਿਤ .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ਵਰਟੀਕਲ

.flex-columnਉਪਯੋਗਤਾ ਦੇ ਨਾਲ ਫਲੈਕਸ ਆਈਟਮ ਦੀ ਦਿਸ਼ਾ ਬਦਲ ਕੇ ਆਪਣੇ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਸਟੈਕ ਕਰੋ । ਉਹਨਾਂ ਨੂੰ ਕੁਝ ਵਿਊਪੋਰਟਾਂ 'ਤੇ ਸਟੈਕ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਪਰ ਦੂਜਿਆਂ ਨੂੰ ਨਹੀਂ? ਜਵਾਬਦੇਹ ਸੰਸਕਰਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ (ਉਦਾਹਰਨ ਲਈ, .flex-sm-column)।

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ਹਮੇਸ਼ਾ ਵਾਂਗ, ਵਰਟੀਕਲ ਨੈਵੀਗੇਸ਼ਨ s ਤੋਂ ਬਿਨਾਂ ਵੀ ਸੰਭਵ <ul>ਹੈ।

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

ਟੈਬਸ

ਉੱਪਰੋਂ ਮੂਲ nav ਲੈਂਦਾ ਹੈ ਅਤੇ .nav-tabsਇੱਕ ਟੈਬਡ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ ਕਲਾਸ ਨੂੰ ਜੋੜਦਾ ਹੈ। ਸਾਡੇ ਟੈਬ JavaScript ਪਲੱਗਇਨ ਨਾਲ ਟੈਬਬਲ ਖੇਤਰ ਬਣਾਉਣ ਲਈ ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ।

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ਗੋਲੀਆਂ

ਉਹੀ HTML ਲਓ, ਪਰ ਇਸਦੀ .nav-pillsਬਜਾਏ ਵਰਤੋਂ:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ਭਰੋ ਅਤੇ ਜਾਇਜ਼ ਠਹਿਰਾਓ

.navਦੋ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਵਿੱਚੋਂ ਇੱਕ ਪੂਰੀ ਉਪਲਬਧ ਚੌੜਾਈ ਨੂੰ ਵਧਾਉਣ ਲਈ ਆਪਣੀ ਸਮੱਗਰੀ ਨੂੰ ਮਜਬੂਰ ਕਰੋ । ਆਪਣੇ .nav-items ਨਾਲ ਸਾਰੀ ਉਪਲਬਧ ਥਾਂ ਨੂੰ ਅਨੁਪਾਤਕ ਤੌਰ 'ਤੇ ਭਰਨ ਲਈ, ਵਰਤੋ .nav-fill। ਧਿਆਨ ਦਿਓ ਕਿ ਸਾਰੀ ਹਰੀਜੱਟਲ ਸਪੇਸ ਉੱਤੇ ਕਬਜ਼ਾ ਹੈ, ਪਰ ਹਰ ਨੈਵੀ ਆਈਟਮ ਦੀ ਚੌੜਾਈ ਇੱਕੋ ਜਿਹੀ ਨਹੀਂ ਹੈ।

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

<nav>-ਅਧਾਰਿਤ ਨੈਵੀਗੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ , ਤੁਸੀਂ ਸੁਰੱਖਿਅਤ ਢੰਗ ਨਾਲ ਇਸ ਨੂੰ ਛੱਡ ਸਕਦੇ ਹੋ .nav-itemਕਿਉਂਕਿ ਸਿਰਫ਼ .nav-linkਸਟਾਈਲਿੰਗ <a>ਤੱਤਾਂ ਲਈ ਲੋੜੀਂਦਾ ਹੈ।

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

ਬਰਾਬਰ-ਚੌੜਾਈ ਵਾਲੇ ਤੱਤਾਂ ਲਈ, ਵਰਤੋ .nav-justified। ਸਾਰੀ ਹਰੀਜੱਟਲ ਸਪੇਸ ਨੈਵੀ ਲਿੰਕਸ ਦੁਆਰਾ ਕਬਜ਼ੇ ਵਿੱਚ ਕੀਤੀ ਜਾਵੇਗੀ, ਪਰ .nav-fillਉਪਰੋਕਤ ਦੇ ਉਲਟ, ਹਰ ਨੈਵੀ ਆਈਟਮ ਇੱਕੋ ਚੌੜਾਈ ਹੋਵੇਗੀ।

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

-ਅਧਾਰਿਤ ਨੈਵੀਗੇਸ਼ਨ .nav-fillਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਉਦਾਹਰਨ ਦੇ ਸਮਾਨ ।<nav>

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

ਫਲੈਕਸ ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ

ਜੇਕਰ ਤੁਹਾਨੂੰ ਜਵਾਬਦੇਹ ਨੈਵੀ ਭਿੰਨਤਾਵਾਂ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ flexbox ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਇੱਕ ਲੜੀ ਦੀ ਵਰਤੋਂ ਕਰਨ 'ਤੇ ਵਿਚਾਰ ਕਰੋ । ਵਧੇਰੇ ਵਰਬੋਸ ਹੋਣ ਦੇ ਬਾਵਜੂਦ, ਇਹ ਉਪਯੋਗਤਾਵਾਂ ਜਵਾਬਦੇਹ ਬ੍ਰੇਕਪੁਆਇੰਟਸ ਵਿੱਚ ਵਧੇਰੇ ਅਨੁਕੂਲਤਾ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੀਆਂ ਹਨ। ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਵਿੱਚ, ਸਾਡੇ nav ਨੂੰ ਸਭ ਤੋਂ ਹੇਠਲੇ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਸਟੈਕ ਕੀਤਾ ਜਾਵੇਗਾ, ਫਿਰ ਇੱਕ ਲੇਟਵੇਂ ਲੇਆਉਟ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ ਜੋ ਛੋਟੇ ਬ੍ਰੇਕਪੁਆਇੰਟ ਤੋਂ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੀ ਉਪਲਬਧ ਚੌੜਾਈ ਨੂੰ ਭਰਦਾ ਹੈ।

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

ਪਹੁੰਚਯੋਗਤਾ ਬਾਰੇ

role="navigation"ਜੇਕਰ ਤੁਸੀਂ ਨੈਵੀਗੇਸ਼ਨ ਪੱਟੀ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ navs ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਦੇ ਸਭ ਤੋਂ ਲਾਜ਼ੀਕਲ ਪੇਰੈਂਟ ਕੰਟੇਨਰ ਵਿੱਚ ਇੱਕ ਜੋੜਨਾ ਯਕੀਨੀ ਬਣਾਓ <ul>, ਜਾਂ <nav>ਪੂਰੇ ਨੈਵੀਗੇਸ਼ਨ ਦੇ ਦੁਆਲੇ ਇੱਕ ਤੱਤ ਨੂੰ ਸਮੇਟਣਾ ਯਕੀਨੀ ਬਣਾਓ। ਭੂਮਿਕਾ ਨੂੰ ਆਪਣੇ ਆਪ ਵਿੱਚ ਨਾ ਜੋੜੋ <ul>, ਕਿਉਂਕਿ ਇਹ ਇਸਨੂੰ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੁਆਰਾ ਇੱਕ ਅਸਲ ਸੂਚੀ ਵਜੋਂ ਘੋਸ਼ਿਤ ਕਰਨ ਤੋਂ ਰੋਕਦਾ ਹੈ।

ਨੋਟ ਕਰੋ ਕਿ ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ, ਭਾਵੇਂ .nav-tabsਕਲਾਸ ਦੇ ਨਾਲ ਟੈਬਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਵਿਜ਼ੂਲੀ ਸਟਾਈਲ ਕੀਤੇ ਜਾਣ , , ਜਾਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਹੀਂ ਦਿੱਤੀਆਂ ਜਾਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। ਇਹ ਸਿਰਫ ਡਾਇਨਾਮਿਕ ਟੈਬਡ ਇੰਟਰਫੇਸਾਂ ਲਈ ਢੁਕਵੇਂ ਹਨ, ਜਿਵੇਂ ਕਿ ARIA ਆਥਰਿੰਗ ਪ੍ਰੈਕਟਿਸ ਗਾਈਡ ਟੈਬ ਪੈਟਰਨ ਵਿੱਚ ਦੱਸਿਆ ਗਿਆ ਹੈ । ਉਦਾਹਰਨ ਲਈ ਇਸ ਭਾਗ ਵਿੱਚ ਡਾਇਨਾਮਿਕ ਟੈਬਡ ਇੰਟਰਫੇਸਾਂ ਲਈ JavaScript ਵਿਵਹਾਰ ਦੇਖੋ ।role="tablist"role="tab"role="tabpanel"

ਡ੍ਰੌਪਡਾਊਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਥੋੜਾ ਜਿਹਾ ਵਾਧੂ HTML ਅਤੇ ਡ੍ਰੌਪਡਾਉਨ JavaScript ਪਲੱਗਇਨ ਦੇ ਨਾਲ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਸ਼ਾਮਲ ਕਰੋ ।

ਡ੍ਰੌਪਡਾਊਨ ਵਾਲੀਆਂ ਟੈਬਾਂ

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ਡਰਾਪਡਾਊਨ ਦੇ ਨਾਲ ਗੋਲੀਆਂ

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

JavaScript ਵਿਵਹਾਰ

ਟੈਬ JavaScript ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰੋ—ਇਸ ਨੂੰ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਜਾਂ ਕੰਪਾਇਲ ਕੀਤੀ bootstrap.jsਫਾਈਲ ਰਾਹੀਂ ਸ਼ਾਮਲ ਕਰੋ—ਸਾਡੀਆਂ ਨੇਵੀਗੇਸ਼ਨਲ ਟੈਬਾਂ ਅਤੇ ਗੋਲੀਆਂ ਨੂੰ ਸਥਾਨਕ ਸਮੱਗਰੀ ਦੇ ਟੈਬਬਲ ਪੈਨ ਬਣਾਉਣ ਲਈ ਵਧਾਉਣ ਲਈ।

ਜੇਕਰ ਤੁਸੀਂ ਸਰੋਤ ਤੋਂ ਸਾਡੀ JavaScript ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਇਸਦੀ ਲੋੜ ਹੈutil.js ।

ਗਤੀਸ਼ੀਲ ਟੈਬਡ ਇੰਟਰਫੇਸ, ਜਿਵੇਂ ਕਿ ARIA ਆਥਰਿੰਗ ਪ੍ਰੈਕਟਿਸਸ ਗਾਈਡ ਟੈਬ ਪੈਟਰਨ ਵਿੱਚ ਵਰਣਨ ਕੀਤਾ ਗਿਆ ਹੈ, ਉਹਨਾਂ ਦੀ ਬਣਤਰ, ਕਾਰਜਸ਼ੀਲਤਾ ਅਤੇ ਮੌਜੂਦਾ ਸਥਿਤੀ ਨੂੰ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ (ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ) ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਤੱਕ ਪਹੁੰਚਾਉਣ ਲਈ role="tablist", role="tab", role="tabpanel", ਅਤੇ ਵਾਧੂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ । aria-ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸ ਦੇ ਤੌਰ 'ਤੇ, ਅਸੀਂ ਟੈਬਾਂ ਲਈ ਤੱਤ ਵਰਤਣ ਦੀ ਸਿਫ਼ਾਰਸ਼ ਕਰਦੇ ਹਾਂ <button>, ਕਿਉਂਕਿ ਇਹ ਉਹ ਨਿਯੰਤਰਣ ਹਨ ਜੋ ਇੱਕ ਗਤੀਸ਼ੀਲ ਤਬਦੀਲੀ ਨੂੰ ਟਰਿੱਗਰ ਕਰਦੇ ਹਨ, ਨਾ ਕਿ ਨਵੇਂ ਪੰਨੇ ਜਾਂ ਸਥਾਨ 'ਤੇ ਨੈਵੀਗੇਟ ਕਰਨ ਵਾਲੇ ਲਿੰਕਾਂ ਦੀ ਬਜਾਏ।

ਨੋਟ ਕਰੋ ਕਿ ਟੈਬ JavaScript ਪਲੱਗਇਨ ਟੈਬਡ ਇੰਟਰਫੇਸਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੀ ਹੈ ਜਿਸ ਵਿੱਚ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ, ਕਿਉਂਕਿ ਇਹ ਉਪਯੋਗਤਾ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਸਮੱਸਿਆਵਾਂ ਦਾ ਕਾਰਨ ਬਣਦੇ ਹਨ। ਉਪਯੋਗਤਾ ਦੇ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਤੋਂ, ਇਹ ਤੱਥ ਕਿ ਵਰਤਮਾਨ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਟੈਬ ਦਾ ਟਰਿੱਗਰ ਤੱਤ ਤੁਰੰਤ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦਾ (ਕਿਉਂਕਿ ਇਹ ਬੰਦ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਦੇ ਅੰਦਰ ਹੈ) ਉਲਝਣ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਹੈ। ਪਹੁੰਚਯੋਗਤਾ ਦੇ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਤੋਂ, ਵਰਤਮਾਨ ਵਿੱਚ ਇਸ ਕਿਸਮ ਦੇ ਨਿਰਮਾਣ ਨੂੰ ਇੱਕ ਮਿਆਰੀ WAI ARIA ਪੈਟਰਨ ਵਿੱਚ ਮੈਪ ਕਰਨ ਦਾ ਕੋਈ ਸਮਝਦਾਰ ਤਰੀਕਾ ਨਹੀਂ ਹੈ, ਮਤਲਬ ਕਿ ਇਸਨੂੰ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਆਸਾਨੀ ਨਾਲ ਸਮਝਣ ਯੋਗ ਨਹੀਂ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।

ਟੈਬ ਪੈਨਲ ਲਈ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ। ਇਹ ਹੋਮ ਟੈਬ ਨਾਲ ਸਬੰਧਤ ਹੈ। ਤੁਹਾਨੂੰ ਮੀਲ ਉੱਚਾ, ਇੰਨਾ ਉੱਚਾ ਲੈ ਜਾਂਦਾ ਹੈ, ਕਿਉਂਕਿ ਉਸਨੂੰ ਇੱਕ ਅੰਤਰਰਾਸ਼ਟਰੀ ਮੁਸਕਰਾਹਟ ਮਿਲੀ ਹੈ। ਮੇਰੇ ਬਿਸਤਰੇ ਵਿੱਚ ਇੱਕ ਅਜਨਬੀ ਹੈ, ਮੇਰੇ ਸਿਰ ਵਿੱਚ ਇੱਕ ਧੜਕਣ ਹੈ. ਓਹ ਨਹੀਂ. ਇੱਕ ਹੋਰ ਜ਼ਿੰਦਗੀ ਵਿੱਚ ਮੈਂ ਤੁਹਾਨੂੰ ਠਹਿਰਾਵਾਂਗਾ. 'ਕਿਉਂਕਿ ਮੈਂ, ਮੈਂ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਦੇ ਸਮਰੱਥ ਹਾਂ. ਮੇਰੀ ਤਾਜ ਦੀ ਲੜਾਈ ਲਈ ਅਨੁਕੂਲ. ਆਪਣੇ ਮਾਪਿਆਂ ਦੀ ਸ਼ਰਾਬ ਚੋਰੀ ਕਰਕੇ ਛੱਤ 'ਤੇ ਚੜ੍ਹ ਜਾਂਦਾ ਸੀ। ਟੋਨ, ਟੈਨ ਫਿੱਟ ਅਤੇ ਤਿਆਰ, ਇਸ ਨੂੰ ਮੋੜੋ ਕਿਉਂਕਿ ਇਹ ਭਾਰੀ ਹੋ ਰਿਹਾ ਹੈ। ਉਸਦਾ ਪਿਆਰ ਨਸ਼ੇ ਵਾਂਗ ਹੈ। ਮੇਰਾ ਅੰਦਾਜ਼ਾ ਹੈ ਕਿ ਮੈਂ ਭੁੱਲ ਗਿਆ ਸੀ ਕਿ ਮੇਰੇ ਕੋਲ ਇੱਕ ਵਿਕਲਪ ਸੀ।

ਟੈਬ ਪੈਨਲ ਲਈ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ। ਇਹ ਪ੍ਰੋਫਾਈਲ ਟੈਬ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ। ਤੁਹਾਨੂੰ ਸਭ ਤੋਂ ਵਧੀਆ ਆਰਕੀਟੈਕਚਰ ਮਿਲਿਆ ਹੈ। ਪਾਸਪੋਰਟ ਸਟੈਂਪ, ਉਹ ਬ੍ਰਹਿਮੰਡੀ ਹੈ। ਵਧੀਆ, ਤਾਜ਼ਾ, ਕਰੜੇ, ਸਾਨੂੰ ਤਾਲੇ 'ਤੇ ਮਿਲ ਗਿਆ. ਕਦੇ ਇਹ ਯੋਜਨਾ ਨਹੀਂ ਬਣਾਈ ਸੀ ਕਿ ਇੱਕ ਦਿਨ ਮੈਂ ਤੁਹਾਨੂੰ ਗੁਆ ਦੇਵਾਂਗਾ. ਉਹ ਤੁਹਾਡੇ ਦਿਲ ਨੂੰ ਖਾ ਜਾਂਦੀ ਹੈ। ਤੁਹਾਡਾ ਚੁੰਮਣ ਬ੍ਰਹਿਮੰਡੀ ਹੈ, ਹਰ ਚਾਲ ਜਾਦੂ ਹੈ. ਮੇਰਾ ਮਤਲਬ ਉਹ ਹੈ, ਮੇਰਾ ਮਤਲਬ ਹੈ ਜਿਵੇਂ ਉਹ ਇੱਕ ਹੈ। ਸ਼ੁਭਕਾਮਨਾਵਾਂ ਪਿਆਰਿਆਂ ਨੂੰ ਆਓ ਇੱਕ ਯਾਤਰਾ ਕਰੀਏ। ਬਸ 4 ਜੁਲਾਈ ਵਰਗੀ ਰਾਤ ਦੇ ਮਾਲਕ! ਪਰ ਤੁਹਾਨੂੰ ਇਸ ਦੀ ਬਜਾਏ ਬਰਬਾਦ ਪ੍ਰਾਪਤ ਆਏਗਾ.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

ਤੁਹਾਡੀਆਂ ਲੋੜਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ, ਇਹ <ul>ਉੱਪਰ ਦਰਸਾਏ ਅਨੁਸਾਰ -ਅਧਾਰਿਤ ਮਾਰਕਅੱਪ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ, ਜਾਂ ਕਿਸੇ ਵੀ ਮਨਮਾਨੇ "ਆਪਣੇ ਖੁਦ ਦੇ" ਮਾਰਕਅੱਪ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ। ਨੋਟ ਕਰੋ ਕਿ ਜੇਕਰ ਤੁਸੀਂ ਵਰਤ ਰਹੇ ਹੋ , ਤਾਂ <nav>ਤੁਹਾਨੂੰ ਇਸ ਵਿੱਚ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਨਾ ਚਾਹੀਦਾ role="tablist", ਕਿਉਂਕਿ ਇਹ ਇੱਕ ਨੈਵੀਗੇਸ਼ਨ ਲੈਂਡਮਾਰਕ ਵਜੋਂ ਤੱਤ ਦੀ ਮੂਲ ਭੂਮਿਕਾ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰ ਦੇਵੇਗਾ। ਇਸਦੀ ਬਜਾਏ, ਇੱਕ ਵਿਕਲਪਿਕ ਤੱਤ (ਹੇਠਾਂ ਦਿੱਤੀ ਗਈ ਉਦਾਹਰਣ ਵਿੱਚ, ਇੱਕ ਸਧਾਰਨ <div>) ਤੇ ਸਵਿਚ ਕਰੋ ਅਤੇ <nav>ਇਸਦੇ ਆਲੇ ਦੁਆਲੇ ਲਪੇਟੋ।

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

ਟੈਬਸ ਪਲੱਗਇਨ ਗੋਲੀਆਂ ਨਾਲ ਵੀ ਕੰਮ ਕਰਦੀ ਹੈ।

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

ਅਤੇ ਲੰਬਕਾਰੀ ਗੋਲੀਆਂ ਦੇ ਨਾਲ.

ਟੈਬ ਪੈਨਲ ਲਈ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ। ਇਹ ਹੋਮ ਟੈਬ ਨਾਲ ਸਬੰਧਤ ਹੈ। ਤੁਹਾਨੂੰ ਡਾਊਨਟਾਊਨ ਵਿੱਚ ਬਲੂਜ਼ ਗਾਉਂਦੇ ਦੇਖਿਆ। ਤੁਸੀਂ ਡਰੇਨ ਦਾ ਚੱਕਰ ਲਗਾਉਂਦੇ ਹੋ। ਤੁਸੀਂ ਮੈਨੂੰ ਰੁਕਣ ਕਿਉਂ ਨਹੀਂ ਦਿੰਦੇ? ਭਾਰਾ ਹੈ ਸਿਰ ਜੋ ਤਾਜ ਪਹਿਨਦਾ ਹੈ। ਹਾਂ, ਅਸੀਂ ਦੂਤਾਂ ਨੂੰ ਰੋਂਦੇ ਹਾਂ, ਉੱਪਰੋਂ ਧਰਤੀ ਉੱਤੇ ਮੀਂਹ ਪਾਉਂਦੇ ਹਾਂ। ਸ਼ੋਅ ਨੂੰ 3D ਵਿੱਚ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਇੱਕ ਫਿਲਮ। ਕੀ ਤੁਸੀਂ ਕਦੇ ਮਹਿਸੂਸ ਕਰਦੇ ਹੋ, ਇੰਨਾ ਕਾਗਜ਼ ਪਤਲਾ ਮਹਿਸੂਸ ਕਰੋ. ਇਹ ਹਾਂ ਜਾਂ ਨਾਂਹ ਹੈ, ਸ਼ਾਇਦ ਨਹੀਂ।

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
      <button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
      <button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
      <button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

data-toggle="tab"ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਨੂੰ ਸਿਰਫ਼ ਨਿਰਧਾਰਿਤ ਕਰਕੇ ਜਾਂ data-toggle="pill"ਕਿਸੇ ਤੱਤ 'ਤੇ ਲਿਖੇ ਬਿਨਾਂ ਇੱਕ ਟੈਬ ਜਾਂ ਪਿਲ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਸਰਗਰਮ ਕਰ ਸਕਦੇ ਹੋ । .nav-tabs'ਤੇ ਜਾਂ 'ਤੇ ਇਹਨਾਂ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ .nav-pills।

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

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

JavaScript ਰਾਹੀਂ

JavaScript ਰਾਹੀਂ ਟੈਬਬਲ ਟੈਬਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ (ਹਰੇਕ ਟੈਬ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਕਿਰਿਆਸ਼ੀਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ):

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

ਤੁਸੀਂ ਵਿਅਕਤੀਗਤ ਟੈਬਾਂ ਨੂੰ ਕਈ ਤਰੀਕਿਆਂ ਨਾਲ ਸਰਗਰਮ ਕਰ ਸਕਦੇ ਹੋ:

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab

ਫੇਡ ਪ੍ਰਭਾਵ

ਟੈਬਾਂ ਨੂੰ ਫੇਡ ਇਨ ਕਰਨ ਲਈ, .fadeਹਰੇਕ ਵਿੱਚ ਜੋੜੋ .tab-pane। ਪਹਿਲੇ ਟੈਬ ਪੈਨ ਨੂੰ ਵੀ .showਸ਼ੁਰੂਆਤੀ ਸਮੱਗਰੀ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ।

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

ਢੰਗ

ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਪਰਿਵਰਤਨ

ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।

ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ ਵੇਖੋ ।

$().ਟੈਬ

ਇੱਕ ਟੈਬ ਤੱਤ ਅਤੇ ਸਮੱਗਰੀ ਕੰਟੇਨਰ ਨੂੰ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਟੈਬ ਵਿੱਚ ਜਾਂ ਤਾਂ ਇੱਕ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ data-targetਜਾਂ, ਜੇਕਰ ਇੱਕ ਲਿੰਕ ਵਰਤ ਰਿਹਾ ਹੈ, ਤਾਂ hrefDOM ਵਿੱਚ ਇੱਕ ਕੰਟੇਨਰ ਨੋਡ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਵਾਲੀ ਵਿਸ਼ੇਸ਼ਤਾ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

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

<script>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('ਦਿਖਾਓ')

ਦਿੱਤੀ ਗਈ ਟੈਬ ਨੂੰ ਚੁਣਦਾ ਹੈ ਅਤੇ ਇਸਦੇ ਸੰਬੰਧਿਤ ਪੈਨ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ। ਕੋਈ ਹੋਰ ਟੈਬ ਜੋ ਪਹਿਲਾਂ ਚੁਣੀ ਗਈ ਸੀ, ਅਣ-ਚੁਣਾਈ ਹੋ ਜਾਂਦੀ ਹੈ ਅਤੇ ਇਸ ਨਾਲ ਸਬੰਧਿਤ ਪੈਨ ਲੁਕ ਜਾਂਦਾ ਹੈ। ਟੈਬ ਪੈਨ ਦੇ ਅਸਲ ਵਿੱਚ ਵਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.tabਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

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

.tab('ਨਿਪਟਾਰਾ')

ਕਿਸੇ ਤੱਤ ਦੀ ਟੈਬ ਨੂੰ ਨਸ਼ਟ ਕਰਦਾ ਹੈ।

ਸਮਾਗਮ

ਇੱਕ ਨਵੀਂ ਟੈਬ ਦਿਖਾਉਂਦੇ ਸਮੇਂ, ਇਵੈਂਟਸ ਹੇਠਾਂ ਦਿੱਤੇ ਕ੍ਰਮ ਵਿੱਚ ਚਾਲੂ ਹੁੰਦੇ ਹਨ:

hide.bs.tab(ਮੌਜੂਦਾ ਸਰਗਰਮ ਟੈਬ 'ਤੇ)
show.bs.tab(ਦਿਖਾਈ ਜਾਣ ਵਾਲੀ ਟੈਬ 'ਤੇ)
hidden.bs.tabhide.bs.tab(ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ 'ਤੇ, ਇਵੈਂਟ ਲਈ ਉਹੀ )
shown.bs.tabshow.bs.tab(ਨਵੇਂ-ਸਰਗਰਮ ਹੁਣੇ-ਦਿਖਾਈ ਗਈ ਟੈਬ 'ਤੇ, ਘਟਨਾ ਲਈ ਉਹੀ )

ਜੇਕਰ ਕੋਈ ਟੈਬ ਪਹਿਲਾਂ ਹੀ ਕਿਰਿਆਸ਼ੀਲ ਨਹੀਂ ਸੀ, ਤਾਂ hide.bs.tabਅਤੇ hidden.bs.tabਇਵੈਂਟਾਂ ਨੂੰ ਚਾਲੂ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ।

ਘਟਨਾ ਦੀ ਕਿਸਮ	ਵਰਣਨ
show.bs.tab	ਇਹ ਇਵੈਂਟ ਟੈਬ ਸ਼ੋਅ 'ਤੇ ਫਾਇਰ ਕਰਦਾ ਹੈ, ਪਰ ਨਵੀਂ ਟੈਬ ਦਿਖਾਈ ਦੇਣ ਤੋਂ ਪਹਿਲਾਂ। ਕ੍ਰਮਵਾਰ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਅਤੇ ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ (ਜੇ ਉਪਲਬਧ ਹੋਵੇ) ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ ਵਰਤੋਂ `event.target`ਅਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾਓ।`event.relatedTarget`
ਦਿਖਾਇਆ ਗਿਆ.bs.tab	ਇਹ ਇਵੈਂਟ ਇੱਕ ਟੈਬ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਬਾਅਦ ਟੈਬ ਸ਼ੋਅ 'ਤੇ ਫਾਇਰ ਕਰਦਾ ਹੈ। ਕ੍ਰਮਵਾਰ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਅਤੇ ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ (ਜੇ ਉਪਲਬਧ ਹੋਵੇ) ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ ਵਰਤੋਂ `event.target`ਅਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾਓ।`event.relatedTarget`
hide.bs.tab	ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਾਲੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਨਵੀਂ ਟੈਬ ਦਿਖਾਈ ਜਾਂਦੀ ਹੈ (ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਨੂੰ ਲੁਕਾਇਆ ਜਾਣਾ ਹੁੰਦਾ ਹੈ)। ਕ੍ਰਮਵਾਰ ਮੌਜੂਦਾ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਅਤੇ ਨਵੀਂ ਛੇਤੀ ਹੀ ਸਰਗਰਮ ਹੋਣ ਵਾਲੀ ਟੈਬ ਦੀ ਵਰਤੋਂ `event.target`ਅਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ।`event.relatedTarget`
hidden.bs.tab	ਇਹ ਇਵੈਂਟ ਇੱਕ ਨਵੀਂ ਟੈਬ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਬਾਅਦ ਚਾਲੂ ਹੁੰਦਾ ਹੈ (ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਲੁਕ ਜਾਂਦੀ ਹੈ)। ਕ੍ਰਮਵਾਰ ਪਿਛਲੀ ਐਕਟਿਵ ਟੈਬ ਅਤੇ ਨਵੀਂ ਐਕਟਿਵ ਟੈਬ ਦੀ ਵਰਤੋਂ ਕਰੋ `event.target`ਅਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾਓ।`event.relatedTarget`

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