如何关闭活动的jQuery工具选项卡？

Question

我正在使用jQuery Tools标签，我希望能够在点击它时关闭所有活动标签，以便所有标签变为非活动状态。
这是我的jsfiddle。

Answer 1

添加此功能：

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

如果您要逐个删除div.panes > div，请尝试：

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

尝试隐藏元素：

＆＃13;

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;