0

すべてのオプションがクリックされると、ナビゲーションが機能しなくなり、すべてのオプションがホバー時の背景色を保持します。

これは私の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>
4

1 に答える 1

2

これは、activeオプションがアクティブなままであるため、それらをクリアする必要があるためです。あなたはこのようにすることができます： -

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

デモ

ボタンのテキストの変更はデフォルトの動作ではありません。これはウィジェットの代わりに選択された deropdown ではありません。だからあなたはこれを試すかもしれません。

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

  });

デモ

于 2013-06-03T14:32:55.817 に答える