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