jQuery选项卡:如何隐藏单个选项卡?

时间:2014-07-10 13:02:34

标签: javascript jquery jquery-ui tabs

如何隐藏tab2?我可以在第二个 li 中添加ID,而不是使用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
 ....

5 个答案:

答案 0 :(得分:11)

试试这个:

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

答案 1 :(得分:3)

试试这个:

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

答案 2 :(得分:2)

<强> Demo

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();

答案 3 :(得分:0)

你需要隐藏li和div来隐藏标签 所以你的jquery将是

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

答案 4 :(得分:0)

你可以试试这个:

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