启用禁用jquery选项卡

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

已邀请:

4 个回复

素汞读

我要解决的方法是使用一个变量来跟踪按钮是否被单击，默认情况下将其设置为\'false \'，并在按钮单击时将其设置为\'true \'。然后，在标签链接的click事件中检查此变量的值将使您决定是显示新标签，不执行任何操作还是显示一条消息。这是一个工作示例：http://jsbin.com/ijoco5

拟僚疽刊剔

您可以使用以下内容

$(\"#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;
});

需复

我将默认禁用所有这些，然后启用第一个。之后，该按钮应该非常简单。所有这些都应该非常简单。首先：jQuerytabs(\'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>

希望这会有所帮助-祝你好运！顺便说一句：我在这里有一些完整的工作选项卡，您可能想看看。

闯舱酮

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

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

并给id给li> a：<a id=\"tab1\" href=\"#tab1\"></a>

要回复问题请先登录或注册

启用禁用jquery选项卡

4 个回复

发起人

jquery

jquery_tabs

tabs

问题状态

启用禁用jquery选项卡

与内容相关的链接

4 个回复

发起人

jquery

jquery_tabs

tabs

问题状态