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();
});

即使用户删除了活动选项卡，我也只想要一个活动选项卡。目前，当我关闭活动选项卡时，没有活动类，使选项卡相似。

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

关闭选项卡时，获取选项卡的索引。如果是最后一个，则将活动类添加到最后一个选项卡，如果是第一个，则首先，如果在中间的某个位置，则从关闭的选项卡的左侧或右侧取一个。

$(".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 回答