0

できるだけ具体的にしようと思います。タブを動的に追加できるナビゲーションバーがあります。追加のタブをクリックすると、閉じるボタンをクリックしてこれらの追加のタブを削除することもできます。HTMLは次のとおりです。

<ul id="nav-tabs" data-tabs="tabs" >
 <li id="test"  class="active">
  <a href="#home" data-toggle="tabs" >
   <img src="assets/img/button_home_selected3.png" class="hover" width="83" />
    <span>Home<button type="button" class="close">&times;</button></span>
  </a>
 </li>
</ul>

li タグは動的に追加および削除されます。li タグのアクティブなクラスは、タブを区別できるようにするさまざまな画像を表示するため、アクティブなクラスは li タグ間で切り替わります。

タブを閉じるスクリプトは次のとおりです。

$('.close').click(function(e) {
 e.preventDefault();
 var panelId = $(this).closest("li").remove().attr("aria-controls");
 $("#tab" + panelId).remove();
});

アクティブなタブがユーザーによって削除された場合でも、少なくとも 1 つのアクティブなタブが必要です。現在、アクティブなタブを閉じると、アクティブなクラスがなく、タブが似ています。

4

2 に答える 2

0

あなたはこれを試すことができます：

$('.close').click(function(e) {
    e.preventDefault();
    var panelId = $(this).closest("li").remove().attr("aria-controls");
    $("#tab" + panelId).remove();
    $("#nav-tabs").children("li").last().addClass("active");
});

最初のタブをアクティブにする場合は、.last()をに置き換えます。.first():)

于 2013-02-14T08:49:31.587 に答える
0

タブを閉じるときは、タブのインデックスを取得します。それが最後のタブである場合は、アクティブなクラスを最後のタブに追加します。最初の場合は最初に、中央のどこかにある場合は、閉じたタブの左または右から 1 つを取得します。

$(".close").on("click", function() {
      var elem = $(this).closest("li");

      if (elem.hasClass("active")) {
          var idx = elem.index(),
              remainingTabs = $("li");

          if (idx <= remainingTabs.length) {
              $(remainingTabs.get(idx - 1)).addClass("active");
          } else if (idx == 0) {
              $(remainingTabs.get(0)).addClass("active");
          }
      }

      // remove current tab
      $(".close", elem).unbind();
      elem.remove();
}
于 2013-02-14T08:52:49.170 に答える