如何使用 Twitter Bootstrap 3 显示选项卡内容

How to show tab contents with Twitter Bootstrap 3

本文关键字：选项 显示 何使用 Twitter Bootstrap      更新时间：2023-09-26

>我在我的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');
});

当必填字段在"必需选项卡"上填写时，我单击下面的下一个按钮，该按钮调用 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");
    }
}

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

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

我遵循了这里不起作用的示例：

推特引导选项卡选择不更改内容

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

在代码中替换： $('#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 因此请改用#pnav-tabs。

相关文章：