Javascript 使用bootstrap和knockout.js显示选项卡

我正在尝试使用引导显示选项卡

使用此代码时，不会显示选项卡

查看：

function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();

    // Behaviours    
    self.goToFolder = function(folder) { self.chosenFolderId(folder); };    
};

ko.applyBindings(new WebmailViewModel());

查看模型：

function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();

    // Behaviours    
    self.goToFolder = function(folder) { self.chosenFolderId(folder); };    
};

ko.applyBindings(new WebmailViewModel());

我的代码有什么问题？

您发布的代码中有很多问题：

• 您发布的标记无效：有一个未关闭的标记
• 您发布的标记无效：有一个

  ul

  是第一个

  ul

  的直接后代，您可能只需要一个
• 为什么一个选项卡中会有两个

  a

  标记

  li

  ？你只想要一个
• 您既有

  li

  的内容，也有

  text

  绑定（将覆盖内容）。引导需要

  a

  ，所以我认为应该将绑定移动到该元素

• 单击

  绑定可能应该在

  a

  标记上，而不是

  li

  上
• 您为活动的

  li

  项呈现一个

  选定的

  类，但如果查看，您将看到它应该是活动的
• 您可以将引导中的

  数据-*

  属性（即

  数据切换

  ）与选择选项卡的淘汰方式（单击

  和
  css
  绑定）混合使用。你可能只想要后者

在解决了所有这些问题（可能还有我上面忘记提到的一两个小问题）之后，您最终会得到如下结果：

函数WebmailViewModel（）{
//资料
var self=这个；
self.folders=[“收件箱”、“存档”、“已发送”、“垃圾邮件”]；
self.chosenFolderId=ko.observable（）；
//行为
self.goToFolder=函数（文件夹）{self.chosenFolderId（文件夹）；}；
};
应用绑定（新的WebmailViewModel（））
body{padding:10px；}





在纠正Jeroen指出的所有错误后，还有一点需要改进：


函数WebmailViewModel（）{
var self=这个；
self.folders=[
{id:'收件箱'，名称：'收件箱'}，
{id:'#archive'，名称：'archive'}，
{id:'#sent'，name:'sent'}，
{id:'#spam'，名称：'spam'}
];
self.chosenFolder=ko.observable（self.folders[0]）；
}
$（函数（）{
应用绑定（新的WebmailViewModel（））；
});





选项卡内容在此
simple您可以试试这个。如有任何疑问，请告诉我。干杯