Javascript 如何让基本jQuery选项卡在.Net模式弹出窗口中工作？

非常简单的问题：我是否遗漏了什么？看来这应该是所有的基本设置所必需的。。。目前我得到了一个非样式化的版本（即没有标签，只有纯文本/html）。因此，它们看起来不像选项卡，当您单击它们时，不会像选项卡所预期的那样隐藏/显示任何内容。我是否必须手动连接javascript来显示和隐藏选项卡的内容，还是框架为我这样做

更新：

所以我测试了代码并 这适用于基本选项卡。 但是，我需要在一个 使用“Ajax”的.Net模式弹出窗口 工具箱。本质上，这是在做一个 我注意到的回邮倾向于 与jQuery抗争。在过去，我 使用jQuery事件，但是 我不知道该把它绑在什么上面。。。 通常，您会绑定到 对象，类似于 按钮在这里，我需要附加 选项卡分配/绑定（使用.tabs（） )通过现场活动但我不确定 哪一个。我试着绑在绳子上 文档加载事件，但与 即：

有什么想法吗？

页面上包含的样式表和Javascript链接：

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css
https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js

在我的样式表中添加了以下行：

.ui-tabs .ui-tabs-hide { display: none; }

已将以下脚本添加到页面：

<script type="text/javascript">
  $(function () {
  $("#tabs2").tabs();
  $("#tabs").tabs();
  });
</script>

$（函数（）{
$（“#tabs2”）.tabs（）；
$（“#制表符”）.tabs（）；
});

HTML:

表1内容

表2内容

表3内容

还注意到页面（）上的“主题化”文档中说明了以下内容。我应该手动输入所有这些样式（比如ui小部件）还是依赖框架来完成

使用jQueryUICSS的示例标记 框架类

第一页的内容在这里

...

注意：这是一个标记示例 由tabs插件生成，而不是 您应该使用的标记来创建 标签。这是唯一需要的标记 是

表1内容

表2内容

表3内容

我觉得一切都很好。你确定你的文件链接正确吗

---

尝试在两个.js文件之后链接到.css文件。我在jQueryUIDatePicker上也遇到了类似的问题，一旦我按照上面的顺序重新排列了列表，它就工作得很好。

尝试将脚本文件放在css文件之后，然后尝试下面的代码

  $(document).ready(function () {
      $("#tabs").tabs();
  });

注意：我删除了这一行，因为我在您的代码中没有看到任何具有此id的内容：

  $("#tabs2").tabs();

---

这可能对使用.tabs（）[您的代码在我看来还可以]没有帮助，但它可能会帮助您跟踪问题。试着一次一件地处理事情：

使用适当的调试器（firebug、IE开发工具、Chrome开发工具等），在$（“#tabs”）.tabs（）上设置断点；线路。如果遇到断点，就知道jquery框架已正确加载，可以排除这种情况

要验证JqueryUI框架是否正确加载，请对元素应用其他一些特定于JqueryUI的特性，例如使用$（'#element'）.button（）方法将元素转换为按钮。如果这样做有效，您就知道jQueryUI框架已正确加载

要验证.css文件是否已正确加载，请向页面添加一个额外的html元素，并向其中添加一个jquery UI类（例如UI状态高亮显示）-如果样式发生更改，则.css文件已正确加载

---

然后，评估jquery对象的length属性，以查看选择器是否成功找到了要查找的元素，或者是否为$（“#tabs”）添加了“watch”表达式查看它的发现。

您可以找到在回发完成后发生的适当事件-我对MSAjax库不太熟悉，不知道会发生什么，但他们会有一个这样的事件似乎是合理的。在这种情况下，您可以执行.tabs（）代码。

@Allan没问题。是的，这是一个非常酷的网站。我在这里也找到了。谢谢你在@spinon测试它。这是一个值得了解的好工具。我查看了它生成的代码，有点不对劲（jquery 1.4.3和jquery ui 1.8.5），但根据google api文档，我认为这些代码被强制到了最新版本。@longda是的，我注意到它们不是相同的版本，但我并不认为这是问题所在。我想这可能是你链接文件的方式。但是我想做一个简单的测试来确认。谢谢你的提示。一旦我得到这个工作（通过一个基本的HTML5页面），我试图改变这些，但它没有对这个问题的影响。好的捕获。。。那是一些测试的剩余。谢谢艾伦！这最初是在继承的.Net应用程序的上下文中进行的。我把它简化了，并在一个原始的HTML5页面上试用了一下。这个代码起作用了，所以我知道这是另外一回事。我相信我已经将它隔离到了.Net中用于模式弹出窗口的回发（我将这些选项卡放在那里）。对于我的具体问题，这几乎是我必须做的。。。在本例中，我没有任何可附加的最佳设置，但由于我显示了一个带有输入字段的模式弹出窗口，因此我将焦点设置为弹出窗口中的第一个输入。然后我将焦点事件附加到该控件上，一切又恢复正常。

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

  $(document).ready(function () {
      $("#tabs").tabs();
  });

  $("#tabs2").tabs();