タブを閉じるときに自動的に次の/前のUL LIタブに移動する

Question

私のスキルレベルでは不可能と思われるものを達成するには、このサイトの専門家とコードの専門家の助けが本当に必要です。私の目標は、閉じるボタンを使用してタブを閉じることができるようにすることです。そして、選択されたタブは閉じられ、次のビューはタブに応じて右または左のタブに移動します。

タブがユーザーによって閉じられるたびに、デフォルトのアクションは自動的に左に隣接するタブを選択することです。何のタブが閉じるように残っていないがある場合

、UL LIは、CSSがディスプレイに設定されているリスト：なし

ので、基本的に、EQ（＃）が自動的にその旨を計算するだろうか。私は例のために使用するだけの番号を入れましたが、コードは前のタブの選択肢を決定する必要がありますか？ここで

はフィドルである：ここでは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 evにいくつか変更を加えましたentハンドラ。 前のタブを見つけるには、現在のタブのインデックスを見つける必要があります。 アクティブなタブかどうかを確認してください。

• それはアクティブタブの場合は、前のタブを選択します（マイナス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(); 
    } 

});