활성 jQuery 도구 탭을 닫는 방법?

Question

jQuery Tools 탭을 사용 중입니다. 클릭 할 때 활성 탭을 닫아서 모든 탭이 비활성 상태가되도록하고 싶습니다.
이것은 내 jsfiddle입니다.

Answer 1

이 기능을 추가 : 하나를 사용하여 div.panes > div 하나를 제거하려면

$("li").click(function() { 
    $(this).remove(); 
    $("div.panes > div").remove(); 
}); 

을 시도 :

$("li").click(function() { 
 
var i = $('li').index(this); 
 
var divs = $("div.panes > div"); 
 
for (var j=0;j<divs.length;j++) { 
 
    if (j == i) { 
 
    if ($("div.panes > div").eq(i).css('display') == 'none') { 
 
     $("div.panes > div").eq(i).css("display", "block"); 
 
    } else { 
 
     $("div.panes > div").eq(i).css("display", "none"); 
 
    } 
 
    } else { 
 
    $("div.panes > div").eq(j).css("display", "none"); 
 
    } 
 
} 
 
});

/* root element for tabs */ 
 
ul.tabs { 
 
    margin:0 !important; 
 
    padding:0; 
 
    height:30px; 
 
    border-bottom:1px solid #666; 
 
} 
 

 
/* single tab */ 
 
ul.tabs li { 
 
    float:left; 
 
    padding:0; 
 
    margin:0; 
 
    list-style-type:none; 
 
} 
 

 
/* link inside the tab. uses a background image */ 
 
ul.tabs a { 
 
    float:left; 
 
    font-size:13px; 
 
    display:block; 
 
    padding:5px 30px; 
 
    text-decoration:none; 
 
    border:1px solid #666; 
 
    border-bottom:0px; 
 
    height:18px; 
 
    background-color:#efefef; 
 
    color:#777; 
 
    margin-right:2px; 
 
    position:relative; 
 
    top:1px; 
 
    outline:0; 
 
    -moz-border-radius:4px 4px 0 0; 
 
} 
 

 
ul.tabs a:hover { 
 
    background-color:#F7F7F7; 
 
    color:#333; 
 
} 
 

 
/* selected tab */ 
 
ul.tabs a.current { 
 
    background-color:#ddd; 
 
    border-bottom:1px solid #ddd; 
 
    color:#000; 
 
    cursor:default; 
 
} 
 

 

 
/* tab pane */ 
 
.panes div { 
 
    display:none; 
 
    border:1px solid #666; 
 
    border-width:0 1px 1px 1px; 
 
    min-height:150px; 
 
    padding:15px 20px; 
 
    background-color:#ddd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="tabs"> 
 
    <li><a href="#">Tab 1</a></li> 
 
    <li><a href="#">Tab 2</a></li> 
 
    <li><a href="#">Tab 3</a></li> 
 
    </ul> 
 
    
 
    <!-- tab "panes" --> 
 
    <div class="panes"> 
 
    <div>pane 1 content</div> 
 
    <div>pane 2 content</div> 
 
    <div>pane 3 content</div> 
 
    </div>

:

$("li").click(function() { 
    var i = $('li').index(this); 
    $("div.panes > div").eq(i).remove(); 
    $(this).remove(); 
}); 

이 요소를 숨기려면이 시도