启用禁用 jquery 选项卡答案

【问题标题】：enable disable jquery tab启用禁用 jquery 选项卡
【发布时间】：2011-04-14 10:09:29
【问题描述】：

我有一个 jquery 选项卡容器，其中有两个选项卡。现在我想要的是最初的第二个选项卡将被禁用。单击第一个选项卡上的按钮时，第二个选项卡将启用并自动打开。

<script type="text/javascript">
    $(document).ready(function() {
    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
        });

      });
</script>

<div class="tab-wrapper" id="tab-wrapper">
    <div class="tab-header">
        <ul class="tabs">
                <li><a href="#tab1">overview</a></li>
                <li><a href="#tab2">details</a></li>
            </ul>
    </div>
    <div class="tab_container">
            <div id="tab1" class="tab_content">
                here is the list of the overview
        </div>
            <div id="tab2" class="tab_content">
                Particular Details
            </div>
        </div>
</div>

【问题讨论】：

标签： jquery tabs jquery-tabs

【解决方案1】：

你可以使用下面的

$("#tabs").tabs({disabled: [0,1]});

并使用零索引的数字来选择禁用的数字。要启用您的标签，您可以使用：

$("#tabs").tabs({disabled: false });

要设置选中的标签，可以使用jQuery Tabs中的这个例子：

var $tabs = $('#tabs').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

【讨论】：

要使禁用生效，请确保当前未从先前的显示中选择此选项卡。我必须取消选择要禁用的选项卡才能正确显示（如果选项卡处于活动状态（选中），即使以编程方式禁用它仍然会显示` $( "#tabs" ).tabs( "option", "选中", 0 ); $("#tabs").tabs({disabled: [1]});`
感谢您的回答。

【解决方案2】：

我会默认禁用所有这些，然后启用第一个。之后，按钮应该非常简单。所有这些都应该很简单。

首先：jQuerys tabs('disable') 不起作用。所以我建立了自己的功能来禁用它们。这里是：

function disableTabs(obj){
    var c = obj.find("ul li").size();
    for(var i=0;i<c;i++){
        obj.tabs("disable", i);
    }
}

您可以像这样使用它：disableTabs($('#myTabs'))。 jQuery 不允许您禁用当前选项卡 - 因为这是在页面加载中进行，所以它将是第一个选项卡。然后，您将需要创建一些变量来存储一些数据...

var openTab = 0;
var currTab = 0;

然后，有几个函数来处理它......

function enableTab(obj, num){
    obj.tabs("enable", num);
}
function next(){
    openTab++;
    currTab++;
    enableTab($(".tabs"), currTab);
    $(".tabs").tabs("select", currTab);
}
function prev(){
    openTab--;
    currTab--;
    $(".tabs").tabs("select", currTab);
}

然后，我们只需附加一些事件处理程序：

$('#myTab').bind('tabsshow', function(event, ui) {
    currTab = ui.index;
});
$(".next").click(function(){
    next();
});
$(".prev").click(function(){
    prev();
});

这些按钮的 HTML 非常简单：

<a class='prev'>Previous</a>
<a class='next'>Next</a>

希望这会有所帮助 - 祝你好运！

顺便说一句：我在here 上有一些完整的工作标签，你可能想看看。

【讨论】：

【解决方案3】：

我解决这个问题的方法是使用一个变量来跟踪按钮是否被点击，默认设置为“false”，当按钮被点击时设置为“true”。

在选项卡链接的单击事件中检查此变量的值，然后您可以决定是显示新选项卡、什么也不做，或者可能显示一条消息。

这是一个工作示例：http://jsbin.com/ijoco5

【讨论】：

正是这个要求。但我没有使用默认的 jquery 选项卡，在我的情况下 tabLinks.eq(0) 或 tabLinks.eq(1) 不起作用。那么我应该如何选择第二个标签呢？
没有任何默认的 jQuery 选项卡功能，除非您使用 jQuery UI 选项卡，但有时这太过分了。 'tabLinks' 只是我设置的一个变量，其中包含来自选择器 $('#tabs a') 的元素，因此我不必重复调用此选择器。如果你愿意的话，一种缓存方式。 '.eq()' 只是过滤元素的另一种方式，类似于 ':first'，从 0 开始表示第一个元素（api.jquery.com/eq）。我已经修改了示例以使用您的标记，所以也许它更有意义：jsbin.com/ijoco5/2

【解决方案4】：

假设您单击的按钮不是内部选项卡类并希望打开第二个选项卡，那么您可以添加触发事件，例如：

$('.tabs > #tab2').trigger('click');

并将 id 给 li > a : <a id="tab1" href="#tab1"></a>

【讨论】：