skip to Main Content

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>

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search