关闭UL LI标签和移动到前一个选项卡

Question

I really need your help with this. What I am trying to accomplish is to be able to click on the close button (x) and close the tab, then once the tab is then closed, what I would like the code to do, is to select the previous tab (if there are any) and display its related tab content.

If there are no tabs (LI)'s left in the UL to close, then just hide UL entirely.

 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() { alert("clicked") $(this).parent().remove(); $(".tab_content").hide(); }); } 

 .close_wrapper { position: relative; display: inline-block; } .close:before { content: '✕'; font-size: 7.5pt; } .close { position: absolute; top: -10px; right: 0; cursor: pointer; padding: 0px; margin-right: 3px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 --> 

Answer 1

Set "tabX" (where x is the number) as ID to you buttons (not the tabs, for clear code purpose), and class "tabX" to your cotent, then simply

$('.close').on('click',function(){
  var whichone=this.id;
  $('.tab_content').hide().remove();
  $('.tab_content.'+whichone).show();
});