jQuery 选项卡：如何隐藏单个选项卡？

Question

如何隐藏tab2？我可以将 ID 添加到第二个 li，然后用 jQuery 隐藏它，但是没有办法直接通过 .tabs 来做到这一点吗？

<div id="tabs" style="width:100%">
<ul>
    <li>
        <a href="#tab1">
            Tab 1 Title
        </a>
    </li>
    <li>
        <a href="#tab2">
            Tab 2 Title
        </a>
    </li>
</ul>
<div id="tab1" style="width:100%;">
    content tab1
 ....

Answer 1

试试这个：

$('[href="#tab2"]').closest('li').hide();

Answer 2

试试这个：

  $($("#tabs").find("li")[1]).hide()

Answer 3

演示

HTML：

<div id='MyTabSelector'>
  <ul>
    <li><a href="#tabs-1">Tab 0</a></li>
    <li><a href="#tabs-2">Tab 1</a></li>
    <li><a href="#tabs-3">Tab 2</a></li>
  </ul>
  <div id="tabs-1">
      <a href="#" onclick="$('#MyTabSelector').disableTab(1);">Disable Tab 1</a><br />

JS：

(function ($) {
    $.fn.disableTab = function (tabIndex, hide) {
    // Get the array of disabled tabs, if any
    var disabledTabs = this.tabs("option", "disabled");

    if ($.isArray(disabledTabs)) {
        var pos = $.inArray(tabIndex, disabledTabs);

        if (pos < 0) {
            disabledTabs.push(tabIndex);
        }
    }
    else {
        disabledTabs = [tabIndex];
    }

    this.tabs("option", "disabled", disabledTabs);

    if (hide === true) {
        $(this).find('li:eq(' + tabIndex + ')').addClass('ui-state-hidden');
    }

    // Enable chaining
    return this;
};

$.fn.enableTab = function (tabIndex) {
            $(this).find('li:eq(' + tabIndex + ')').removeClass('ui-state-hidden');
    this.tabs("enable", tabIndex);
    return this;

};


})(jQuery);
$('#MyTabSelector').tabs();

Answer 4

您需要隐藏 li 和 div 才能隐藏选项卡 所以你的jquery将是

$($("#tabs").find("li")[1]).hide();
$($("#tabs").find('#tab2')).hide();

Answer 5

你可以试试这个：

//when you click a tab
$('#tabs a').click(function(){
    //show hidden tabs again
    $('#tabs li:hidden').show();
    //hide the clicked tab
    $(this).parent().hide();
});