Twitter Bootstrap Question posted in

replacement of tabs in bootstrap tabs not only border-Twitter bootstrap

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>
Tags:

2

Answers


  1. 0

    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. 0

    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