No puedo entender por qué la pestaña predeterminada aquí es parámetros, no vehículo. Al inicio: los parámetros se abren, aunque lo indico explícitamente
self.curTab = ko.observable ("vehículo");
Puede ejecutarlo aquí http://jsfiddle.net/56gh1vpk/3/
function WebmailViewModel() { var self = this; self.curTab = ko.observable("vehicle"); self.setCurTab = (curTab) => { self.curTab(curTab); } } ko.applyBindings(new WebmailViewModel()); <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> <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> </ul>La peculiaridad clásica de Knockout. Es porque el enlace de clic necesita una referencia de función. Cuando dices: click: setCurTab('parameters') , esa función se ejecuta realmente en tiempo de ejecución. Establecer la pestaña actual en 'parámetros' ya que esa es la última llamada de función ejecutada.
Puede hacer esto: click: function () { setCurTab('vehicle') } , o use bind si no le gustan las funciones anónimas que saturan sus plantillas: click: setCurTab.bind($data, 'vehicle') .