javascript - 关闭选项卡时自动移至下一个/上一个 UL LI 选项卡

Question

我真的需要这个网站上的专家和代码专家的帮助，才能完成对我的技能水平来说似乎不可能的事情。我的目标是能够使用关闭按钮关闭选项卡，然后选定的选项卡将被关闭，下一个 View 将根据选项卡移动到右侧或左侧或右侧选项卡。

每次用户关闭选项卡时，默认操作都是自动选择左侧的相邻选项卡。

如果没有要关闭的选项卡，则 css 设置为显示的 UL LI 列表:无

因此，本质上，如何自动计算 EQ(#) 以达到该效果。我输入数字只是为了用作示例，但代码需要确定要选择的上一个选项卡是什么？

这是一个 fiddle :https://jsfiddle.net/5ju8rq8h/

这是 HTML/CSS:

<div id="main" style="display: inline-block; width: 983px;">
  <ul class="tabs">
    <div class="close_wrapper">
      <li><a href="#tab1">XAL-2017-482336</a><span class="close"></span></li>
    </div>
    <div class="close_wrapper">
      <li><a href="#tab2">A-2017-00471</a><span class="close"></span></li>
    </div>
    <div class="close_wrapper">
      <li><a href="#tab3">A-2017-00123</a><span class="close"></span></li>
    </div>
    <div class="close_wrapper">
      <li><a href="#tab4">A-2017-00456</a><span class="close"></span></li>
    </div>
  </ul>

  <div class="tab_container">
    <div class="tab_wrapper">

      <!--BEGIN DIV TAB 1 -->
      <div id="tab1" class="tab_content"></div>
      <!--END DIV TAB 1 -->

      <!--BEGIN DIV TAB 2 -->
      <div id="tab2" class="tab_content"></div>
      <!--END DIV TAB 2 -->

      <!--BEGIN DIV TAB 3 -->
      <div id="tab3" class="tab_content"></div>
      <!--END DIV TAB 3 -->

      <!--BEGIN DIV TAB 4 -->
      <div id="tab4" class="tab_content"></div>
      <!--END DIV TAB 4 -->

    </div>
    <!-- END DIV main  -->

以下是需要修改的代码:

function init_form() {

    //INITIALIZE TABS
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;       
    });

    $('span.close').on('click', function() {

        var tab = $(this).parent().find("a").attr("href") 
        //alert(tab)

        $(this).parent().remove()//Removes tab

        $(tab).hide().remove()//Remnoves content

        $("ul.tabs li").eq(1).click()//eq() is zero based

    });


}

Answer 1

https://jsfiddle.net/sudarpochong/5ju8rq8h/11/

对 close 事件处理程序进行了一些更改。 要查找上一个选项卡，我们需要找到当前选项卡的索引是什么。 并检查它是否处于事件选项卡。

• 如果它是事件选项卡，请选择上一个选项卡(减 1)
• (如果当前选项卡索引为 0 - 第一个选项卡，则移至下一个选项卡)
• 如果它不是事件标签，只需关闭该标签

代码:

// Close click event handler
$('.close').on('click', function() {

  var tabId = $(this).parent().find("a").attr("href");
  // console.log("close clicked", tabId, this);

  // Find the parent li where close is invoked
  var parentLi = $(this).parent("li");
  // console.log("close clicked", this, parentLi);

  // Get the index of the li, and check if it's active tab
  var indexToClose = $("ul.tabs li").index(parentLi);
  var isActive = parentLi.hasClass("active");
  // console.log("close clicked, indexToClose?", indexToClose, "isActive?", isActive);

  var tabsLength = $("ul.tabs li").length;
  // If current tab is active, find the prev tab, otherwise do nothing (just close the tab)
  if (isActive) {
    var nextIndex = (indexToClose - 1);
    if (nextIndex < 0) {
        nextIndex = indexToClose + 1;
    }

    //console.log("close clicked", "tabs-length", tabsLength, "nextIndex", nextIndex);
    $("ul.tabs li").eq(nextIndex).find("a").click();
  }

  $(this).parent().remove(); // Removes tab
  $(tabId).remove(); // Removes content

    tabsLength = $("ul.tabs li").length;
  if (tabsLength == 0) {
    $(".tabs").hide();
    $(".tab_container").hide();
  }

});