Bootstrap+KnockoutJS标签页默认激活标签不生效问题

• Knockout的click绑定需要传入函数引用，你在绑定时直接写click: setCurTab('vehicle')会在页面初始化解析绑定的阶段就直接执行setCurTab方法。两个标签的绑定按顺序执行，最后运行的是setCurTab('parameters')，直接覆盖了你设置的初始值vehicle，这是默认选中parameters标签的核心原因。
• 你的HTML结构不符合规范：<ul>的合法子元素只能是<li>，你把tab-content放在<ul>内部，既不符合HTML语法要求，也不满足Bootstrap标签页的结构约定，会额外引发渲染异常。

1. 修改click绑定的写法，将直接调用的函数包装为匿名函数，确保只有点击时才执行切换逻辑，两种写法二选一即可：
   • 箭头函数写法：click: () => setCurTab('vehicle')
   • bind写法：click: setCurTab.bind($data, 'vehicle')
2. 把tab-content区块从<ul>标签内部移出来，和<ul>同级。

JS代码 #

function WebmailViewModel() {
    var self = this;
    self.curTab = ko.observable("vehicle");
  
    self.setCurTab = (curTab) => {
        self.curTab(curTab);
    }
}

ko.applyBindings(new WebmailViewModel());

HTML代码 #

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ul class="nav nav-tabs nav-justified mb-3" role="tablist" >
    <li>
        <a data-bind="click: () => setCurTab('vehicle'), css: {active: curTab() == 'vehicle'}" >Vehicle</a>
    </li>
    <li>
        <a data-bind="click: () => setCurTab('parameters'), css: {active: curTab() == 'parameters'}">Parameters</a>
    </li>
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane" data-bind="css: {active: curTab() == 'vehicle'}">Vehicle data</div>
    <div role="tabpanel" class="tab-pane" data-bind="css: {active: curTab() == 'parameters'}">Parameters data</div>
</div>

修改后初始状态会正确激活vehicle标签，点击切换逻辑也能正常运行。

内容的提问来源于stack exchange，提问作者Михаил Хамхоев