Question

我的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 Tab Selection Not Changing Content

如何在单击下一个按钮

后在“可选”选项卡上显示内容

Answer 1

将代码替换为$('#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');

该标签将处理您的课程更改。您在使用ID时使用引用类的.pnav-tabs，请改用#pnav-tabs。

如何使用Twitter Bootstrap 3显示标签内容

1 个答案: