CODEWITHSUNDEEP
twitter-bootstraptabsnavigation
Stacy J
Stacy J

Reputation: 2781

twitter bootstrap button drop down does not work after all the options are clicked

Once all the options are clicked, the navigation stops working and all the options retain their on hover background color.

This is my html :-

<div class="btn-group">
    <button class="btn btn-large">Action</button>
    <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" id="myTab">
        <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
    </ul>
</div>

<div class="tab-content">
    <div class="tab-pane active" id="home">1</div>
    <div class="tab-pane" id="profile">2</div>
    <div class="tab-pane" id="messages">3</div>
    <div class="tab-pane" id="settings">4</div>
</div>

and this is the js :-

<script>
    $(function () {
    $('#myTab a:first').tab('show');
    });

    $('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
   });
</script>

Upvotes: 0

Views: 454

Answers (1)

PSL
PSL

Reputation: 123739

This is because the active options remain active, so you need to clear them out. You can do it like this:-

 $('#myTab a').click(function (e) {
      $(this).tab('show');
      $('.dropdown-menu > li.active').not($(this).closest('li')).removeClass('active');
  });

Demo

Changing the text of the button is not a default behavior, as it is not a select deropdown instead it a widget. So you may try this.

$('#myTab a').click(function (e) {
      $(this).tab('show');
      $('.dropdown-menu > li.active').removeClass('active');
       $(this).closest('.btn-group').find('.action').text($(this).text());

  });

Demo

Upvotes: 2

Related Questions