活动选项卡的动态定义

Question

我有3个标签。在某些情况下，第一个是隐藏的。 第一个是活跃的。如果它被隐藏，第二个应该是活动的。

.html代码：

    <div class="Settings">
    <ul class="nav nav-tabs p">
        <li class="nav-item active i-tab">
            <a class="nav-link" data-toggle="tab" href="#bla" data-bind="text: strings.iTabHeader, visible: isVis"></a>
        </li>
        <li class="nav-item f-tab">
            <a class="nav-link" data-toggle="tab" href="#blabla" data-bind="text: strings.fTabHeader"></a>
        </li>
        <li class="nav-item b-tab">
            <a class="nav-link" data-toggle="tab" href="#blablabla" data-bind="text: strings.bTabHeader"></a>
        </li>
    </ul>

    <div class="tab-content">
        <div id="iSettingMenu" class="tab-pane fade in active">
            <div data-bind="compose: iSettings"></div>
        </div>

        <div id="fSettingsMenu" class="tab-pane fade in active">
            <div data-bind="compose: fSettings"></div>
        </div>

        <div id="bSettingsMenu" class="tab-pane fade">
            <div data-bind="compose: bSettings"></div>
        </div>
     </div>
</div>

.js代码：

this.isvis = ko.computed(function () {
            return this.Type() === 'xxxx';
        }.bind(this));