twitter-bootstrap - 单击所有选项后，twitter bootstrap 按钮下拉菜单不起作用

Question

单击所有选项后，导航将停止工作，并且所有选项都保留其悬停背景颜色。

这是我的 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>

这是js：-

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

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

Answer 1

这是因为这些active选项仍然处于活动状态，因此您需要清除它们。你可以这样做： -

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

演示

更改按钮的文本不是默认行为，因为它不是选择下拉菜单，而是小部件。所以你可以试试这个。

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

  });

演示