CODEWITHSUNDEEP
jqueryhtmlgwtbootstrap3
suraj rawat
suraj rawat

Reputation: 11

replacement of tabs in bootstrap tabs not only border

Following code is for the bootstrap tab, in this the active tab has the border and show their tab respectively, but I want when any person clicks on the second tab the first tab is replaced by the second tab, and when a person clicks on the third tab the first tab is replaced by the third tab. Can anyone show me how can I achieve that?

Here is the code snippet:

<html>
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">...</div>
            <div role="tabpanel" class="tab-pane" id="profile">...</div>
        </div>
    </div>
  </body>
</html>

Upvotes: 0

Views: 215

Answers (2)

DanieleAlessandra
DanieleAlessandra

Reputation: 1555

If you want to move the selected tab button in first position you may use the "shown.bs.tab" event and the ".prepend" method of jQuery objects.

All you need is this:

$(document).ready(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var $myLi = $(this).parent();
    $myLi.parent().prepend($myLi);
  });
})

This moves the active Li node in DOM.

Here is a working example: https://codepen.io/DanieleAlessandra/pen/BqvybV

Upvotes: 0

Niraj Kaushal
Niraj Kaushal

Reputation: 1502

I hope this will help you...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>


<div>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">Home Content</div>
        <div role="tabpanel" class="tab-pane" id="profile">Profile Content</div>
    </div>
</div>

Upvotes: 0

Related Questions