启用禁用jQuery选项卡。

Question

启用禁用jQuery选项卡。

3

我有一个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>

- Krisanu

4个回答

2

我会默认禁用所有选项卡，然后启用第一个选项卡。之后，按钮应该很简单。这一切都应该很简单。

首先，jQuery的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非常简单： ```

那些按钮的HTML非常简单：

```

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

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

顺便说一下：我在这里有一些完全可用的选项卡，你可能会想看看。

- Tanner Ottinger

0

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

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

给 li > a 添加 id 属性：<a id="tab1" href="#tab1"></a>

- Dharmesh

0

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

在选项卡链接的单击事件中检查此变量的值，然后可以决定是否显示新选项卡，不执行任何操作或者显示消息。

以下是一个可工作的示例：http://jsbin.com/ijoco5。

- amustill

这正是要求。但是我没有使用默认的jquery选项卡，在我的情况下，tabLinks.eq(0)或tabLinks.eq(1)无法工作。那么我该如何选择第二个选项卡？ - Krisanu

除非您使用jQuery UI Tabs，否则没有任何默认的jQuery选项卡功能，但有时这可能过于复杂。“tabLinks”只是我设置的一个变量，其中包含选择器$（'#tabs a'）中的元素，以便我不必重复调用此选择器。一种缓存方式。“.eq（）”只是另一种过滤元素的方法，类似于“：first”，从0开始表示第一个元素（http://api.jquery.com/eq/）。我已修改示例以使用您的标记，因此可能更有意义：http://jsbin.com/ijoco5/2/ - amustill

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gaʀʀʏ · Accepted Answer

您可以使用以下内容：

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

使用从零开始的数字选择要禁用哪些。要启用选项卡，您可以使用以下内容：

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

要设置选中的选项卡，您可以使用jQuery选项卡中的以下示例：

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