jqueryhtmlgwtbootstrap3

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>

Solution

  • 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