Question

非常简单的问题：我错过了什么吗？似乎这应该是基本设置所需的全部......目前我正在获得一个非风格化的版本（即没有标签，只是纯文本/ html）。所以它们看起来不像标签，当你点击它们时，没有任何隐藏/显示，就像标签一样。我是否必须手动连接javascript以显示和隐藏选项卡的内容，或者框架是否为我执行此操作？

更新

所以我测试了代码并且这适用于基本选项卡。但是，我需要在里面使用它 .Net模式弹出窗口使用他们的“Ajax” 工具包。基本上这是做一个我注意到的回发倾向于与jQuery战斗。在过去，我使用了jQuery live事件，但是我不确定将它绑定到... 通常你绑定到一个事件对象，就像一个单击处理程序按钮。在这里，我需要附上制表符分配/绑定（使用.tabs（））通过直播活动，但我不确定哪一个。我试着绑定到文件加载事件，但没有运气的是：

$(document).live('load', bind_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>

HTML：

<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>

还注意到页面上的“主题”文档（http://jqueryui.com/demos/tabs/#theming），它说明了以下内容。我应该手动输入所有这些样式（如ui-widget）还是依靠框架来完成它？

使用jQuery UI CSS进行示例标记框架类

<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>

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

<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>

Answer 1

一切看起来都不错。您确定要正确链接文件吗？

http://jsfiddle.net/GwnHq/

Answer 2

<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"/>

尝试在两个.js文件之后链接到.css文件。我在jQuery UI datepicker上遇到了类似的问题，一旦我按照上面的方式对列表进行了重新排序，它运行正常。

Answer 3

这可能对使用.tabs（）[你的代码对我来说没问题]有帮助，但它可能会帮助你找到问题所在。尝试一次输入或输出一个：

使用适当的调试器（firebug，IE Developer Tools，Chrome Developer工具等），在$（“＃tabs”）上添加一个断点.tab（）;线。如果你点击断点，你知道jquery框架已经正确加载，你可以排除它。

要验证JqueryUI框架是否正确加载，请将一些其他jqueryUI特定功能应用于元素 - 例如使用$（'＃element'）。button（）方法将元素转换为按钮。如果可行，您就知道正确加载了jQueryUI框架。

要验证.css文件是否已正确加载，请向页面添加一个额外的html元素，并向其中添加一个jquery UI类（例如，ui-state-highlight） - 如果样式更改，则.css文件已正确加载。

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

Answer 4

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

Answer 5

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

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

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

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

如何在.Net模式弹出窗口中使用基本的jQuery选项卡？

5 个答案: