Question

脚本：

 $(document).ready(function () {
        $("#Tabs").tabs();

  $("#close").click(function () {
    $("#Tabs").tabs({collapsible: true,active: false });
 });

HTML：

 <div id="Tabs">
    <ul>
     <li><a href="#form_1">Details</a></li>
     <li class="end"><a href="#form_2" style="width: 82px !important">Show Map</a></li>
    </ul>
   <div >
     <div id="form_1" style="color:Black !important;" >
       <div class="bg">
         form 1
         </div>
        </div>
       <div id="form_2" style="color:Black !important;" >
       <div class="bg">
         form 2
         </div>
       </div>
     </div>
       </div>
   <a href="javascript:void(0)" class="close" id="close" >close</a>

我正在使用jquery Tabs，当我点击close时，我试图关闭所有打开的标签但是它没有任何想法？

Answer 1

试试 jsFiddle..

代码如下

JQuery功能......

$(document).ready(function () {
        $("#Tabs").tabs();

  $("#close").click(function () {
    $("#Tabs").tabs({
        hide: {
            effect: "fade",
            duration: 500
        },
        show: {
            effect: "fade",
            duration: 500
        },
        collapsible: true,
        active: false
    });
 });
});

HTML code ...

<div id="Tabs">
  <ul>
    <li>
      <a href="#form_1">
        Details
      </a>
    </li>
    <li class="end">
      <a href="#form_2" style="width: 82px !important">
        Show Map
      </a>
    </li>
  </ul>
  <div >
    <div id="form_1" style="color:Black !important;" >
      <div class="bg">
        form 1
      </div>
    </div>
    <div id="form_2" style="color:Black !important;" >
      <div class="bg">
        form 2
      </div>
    </div>
  </div>
</div>
<a href="javascript:void(0)" class="close" id="close" >
  close
</a>

Answer 2

来自文档：

设置为true时，可以关闭活动面板。

由于jQuery没有公开关闭所有标签的方法，因此您必须手动完成：

$("#close").click(function () {
    $('.ui-tabs-panel').hide()
});

小提琴：http://jsfiddle.net/4mtM4/

按钮单击时折叠所有选项卡

2 个答案: