动态设置激活标签页：首个标签隐藏时自动切换至第二个

我来帮你搞定这个需求——当第一个标签页被isVis隐藏时，自动把第二个标签设为激活状态。咱们一步步来修改代码：

1. 先修正JS变量名（重要！） #

你代码里JS定义的是this.isvis，但HTML里用的是isVis（大小写不一致），这会导致绑定失效，先统一成驼峰式命名：

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

2. 给标签页动态绑定激活类 #

原来的active类是硬写在第一个li上的，咱们用Knockout的css绑定来动态控制：

<ul class="nav nav-tabs p">
  <li class="nav-item i-tab" data-bind="css: { active: isVis }">
    <a class="nav-link" data-toggle="tab" href="#bla" data-bind="text: strings.iTabHeader, visible: isVis"></a>
  </li>
  <li class="nav-item f-tab" data-bind="css: { active: !isVis() }">
    <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>

• 第一个标签页：只有isVis为true时才添加active类
• 第二个标签页：当isVis为false时自动添加active类

3. 同步标签内容面板的激活状态 #

原来的tab-content里两个面板都加了active和in类，这会导致显示异常，咱们同样用css绑定同步状态：

<div class="tab-content">
  <div id="iSettingMenu" class="tab-pane fade" data-bind="css: { active: isVis, 'in': isVis }">
    <div data-bind="compose: iSettings"></div>
  </div>
  <div id="fSettingsMenu" class="tab-pane fade" data-bind="css: { active: !isVis(), 'in': !isVis() }">
    <div data-bind="compose: fSettings"></div>
  </div>
  <div id="bSettingsMenu" class="tab-pane fade">
    <div data-bind="compose: bSettings"></div>
  </div>
</div>

• Bootstrap的tab-pane需要同时有active和in类才能正常显示激活状态，所以两个类都要动态绑定
• 第一个面板的激活状态和isVis保持一致，第二个面板则完全相反

这样修改后，当isVis从true变为false时，第一个标签页会隐藏，第二个标签页和对应的内容面板会自动激活；当isVis变回true时，第一个标签页又会恢复激活状态。

内容的提问来源于stack exchange，提问作者MTZ