如何使用裏面的錨點關閉jQuery UI選項卡？

我正在使用可摺疊的jQuery UI選項卡。我的代碼如下所示：如何使用裏面的錨點關閉jQuery UI選項卡？

HTML

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Nunc tincidunt</a></li> 
    <li><a href="#tabs-2">Proin dolor</a></li> 
    <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>Tab 1 Contents</p> 
     <a href="#" class="btn-close">Close</a> 
    </div> 
    <div id="tabs-2"> 
    <p>Tab 2 Contents</p> 
    <a href="#" class="btn-close">Close</a> 
    </div> 
    <div id="tabs-3"> 
    <p>Tab 3 Contents</p> 
    <a href="#" class="btn-close">Close</a> 
    </div> 
</div>

腳本

$(function() { 
    $("#tabs").tabs({ hide: { effect: "slideUp", duration: 350 }, 
    show: { effect: "slideDown", duration: 350 }, 
    collapsible: true, 
    active: false, 
    }); 
    $(".btn-close").on("click", function() { 
    $("#tabs").tabs("option", "hide", { effect: "slideUp", duration: 350 }); 
    }); 
});

我需要通過單擊「關閉」錨崩潰打開的選項卡，但無法弄清楚如何做到這一點。任何人都可以告訴我做錯了什麼？ See above code on JSFiddle。

來源

2013-12-14 Ahmed Ali

不幸的是，在標籤上的插件無可躲方法。使用選項方法，您只需更改插件的設置。你必須觸發這樣的活動選項卡上單擊事件：（這個答案使用由A.Wolff提出的改進去除依賴父元素）

$(".btn-close").on("click", function() { 
    $("#tabs").find('li.ui-state-active a').trigger('click'); 
});

這裏您更新fiddle

來源

2013-12-14 16:11:47 flec

或：$（「.btn-close」）。on（「click」，function（）{（this）.closest（'。ui-tabs'）。find（'。ui-tabs -active a'）。click（）; }）;' –

@ A.Wolff我更喜歡你的解決方案，因爲它不依賴父級。你應該發佈它！ – flec

沒關係，如果您希望將其添加到答案中，請修改您的帖子 –

試試這個：

$(".btn-close").click(function() { 
    $("#tabs").tabs("option", "toggle", { effect: "slideUp", duration: 350 }); 
    $(this).parent().hide(); 
});

這裏的fiddle

來源

2013-12-14 16:04:00 HICURIN

這不起作用。你試過這個嗎？你可能只是使用'$（this）.parent（）。hide（）;'現在評論。 – flec

是的。對不起，我的錯誤 – HICURIN

如何使用裏面的錨點關閉jQuery UI選項卡？

回答

相關問題