0

我在我的 MVC 应用程序中有一个视图，它具有以下选项卡。

<ul class="nav nav-tabs" id="pnav-tabs">
     <li class="active" id="requiredtab-li"><a href="#requiredtab" id="requiredtab-id" data-toggle="tab"><span style="font-size: 18px;"><strong>Step 1:</strong></span> Enter required fields</a></li>
     <li id="optionaltab-li"><a href="#optionaltab" id="optionaltab-id" data-toggle="tab"><span style="font-size: 18px;"><strong>Step 2:</strong></span> Enter optional fields</a></li>
     <li id="uploadtab-li"  ><a href="#uplaodtab" id="uploadtab-id" data-toggle="tab"><span style="font-size: 18px;"><strong>Step 3:</strong></span>Upload your video</a></li>
</ul>

<div class="tab-content">

      <div class="tab-pane active" id="requiredtab">

         TAB CONTENT

       </div>

<div class="tab-pane" id="optionaltab">   

    TAB CONTENT

</div>

<div class="tab-pane" id="uplaodtab">       

   TAB CONTENT
</div>

当我的页面加载时，我禁用“可选”和“上传”选项卡

$(document).ready(function() {
    $('#uploadtab-li').attr('class', 'disabled');
    $('#optionaltab-li').attr('class', 'disabled');
    $('#uploadtab-id').removeAttr('data-toggle');
    $('#optionaltab-id').removeAttr('data-toggle');
});

在“RequiredTab”上填写必填字段后，我单击下面的下一个按钮，该按钮调用 RequiredNext() 函数，应该使可选选项卡处于活动状态并显示可选字段。

这是功能：

function RequiredNext(e) {
    var isRequiredFilled = ValidateInputs();
    if (isRequiredFilled == true) {
        $('#optionaltab-id').attr('data-toggle', 'tab');
        $('#optionaltab-li').attr('class', 'active');
        //$('#requiredtab-li').attr('class', 'disabled');
        e.preventDefault();
        $('.pnav-tabs a[href=#optionaltab]').tab('show');
    } else {
        alert("The optional fields cannot be accessed until the required fields are filled");
    }
}

上述功能使可选选项卡处于活动状态，但我看不到选项卡上的字段。所需选项卡的字段仍显示在该点

此外，第一个选项卡“必需选项卡似乎仍处于活动状态。

我按照这里的例子没有用：

Twitter Bootstrap 选项卡选择不更改内容

单击下一步按钮后，如何在可选选项卡上显示内容

4

1 回答 1

0

在您的代码中替换$('#optionaltab-id').attr('data-toggle', 'tab'); $('#optionaltab-li').attr('class', 'active'); //$('#requiredtab-li').attr('class', 'disabled'); e.preventDefault(); $('.pnav-tabs a[href=#optionaltab]').tab('show');：

    e.preventDefault();
    $('#optionaltab-li').removeClass('disabled');
    $('#requiredtab-li').addClass('disabled');
    $('#pnav-tabs li a[href=#optionaltab]').tab('show');

该选项卡将处理您的班级更改。您.pnav-tabs在使用 id 时使用 which 引用一个类，因此请#pnav-tabs改用。

于 2013-09-29T22:44:31.317 回答