我的 jquery 选项卡中的错误答案

【问题标题】：Bug in my jquery tab我的 jquery 选项卡中的错误
【发布时间】：2013-01-29 21:37:46
【问题描述】：

我正在使用 Jquery UI Bootstrap 选项卡。我有 2 个选项卡定义了产品和版本

 <ul class="nav nav-tabs" id="myTab" style="margin-top: 26px;">
      <li><a href="#product" data-toggle="tab">Product</a></li>
      <li><a href="#version" data-toggle="tab">Version</a></li>
 </ul>

我也更新了我的小提琴。没有更新我的淘汰代码，因为它太长了。链接在下面

My Fiddle

您可以在我的小提琴中看到，当页面加载时，它会在我的标签“产品”底部显示“版本名称、版本代码、平台版本”列。这是错误的。这些列应该出现在我的版本选项卡中。我该怎么做？在我的实际应用程序中，它看起来像这样。我用红色标记了出现在我的产品选项卡中的线。

我需要我的标签的输出如下

【问题讨论】：

标签： jquery knockout.js

【解决方案1】：

这是你需要的吗：http://jsfiddle.net/kSWQF/1/

 $('#myTab').tabs();

请务必检查这些参考资料：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

编辑：

按标签索引显示特定标签：

$('#myTab').tabs("option", "selected", 1 ); //index ie zero based, here selects second tab.

见http://jsfiddle.net/kSWQF/2/

【讨论】：

我收到错误 Uncaught TypeError: Object [object Object] has no method 'tabs'
添加jQuery UI 库参考.. jQuery 选项卡来自jQuery UI.. 查看更新的答案..
如何根据点击事件激活特定标签。现在我必须点击特定的标签才能看到它下面的内容。它应该自动显示内容。我试过 $('#myTab a[href="#version"]').show();但不起作用。
刚刚最后一次查询。我无法在 css 中看到更改颜色选项卡的确切位置。目前它是灰色的。我希望它是透明的。非常感谢您的帮助。我也不明白我做错了什么。您刚刚添加了一个 div 并调用了 $('#myTab').tabs();我已经在做类似 $('#myTab a[href="#product"]').tab('show');它向我展示了正确的标签。唯一的问题是这些列名出现在页面加载中
嗯，jQuery UI Tabs 需要这样的格式...你可以阅读文档here..

【解决方案2】：

不确定这是如何与淘汰赛相关的，但您不应该在选项卡窗格 div 中拥有每个选项卡的所有内容吗？而您有一个用于产品标题的 div 和一个用于内容的 div。您的所有内容都应该在 div 中，并带有您在选项卡的 href 中引用的 id。

【讨论】：

请告诉我怎么做