Question

我正在使用jQuery UI tabs构建一个页面，我看到了一些效果，但不是预期的结果。用于存储标签标题的UL已连线，因此UL和标签内容是同一较大DIV的一部分。控制台包含某些描述的诊断信息，但我的代码中没有报告的错误，其他的＆＃39;代码，资源加载等。我检查了JavaScript / CSS的链接，它们都指向看起来像JavaScript / CSS的真实资源：

<link href='//fonts.googleapis.com/css?family=Averia+Serif+Libre:400,700,400italic,700italic' rel='stylesheet' type='text/css' />
<link href='/jquery-ui-1.12.0.custom/jquery-ui.css' />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/javascripts/bgstretch.js"></script>

显示，就人们对CSS的期望而言，只是在没有尝试应用jQuery UI的情况下看到的内容。但是，调试器会显示添加的类，人们可以期望jQuery UI将UL和一些DIV转换为选项卡式显示，例如：

<a href="#living-room" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-6">Living Room</a>

原始元素是未加修饰的：

<a href="#living-room">Living Room</a>

我可以/应该做什么，以便jQuery标签正常运行？

Answer 1

http://codepen.io/anon/pen/BzxbqY

你是否包含了jquery ui css？

我删除了所有脚本并使用了

$(document).ready(function(){

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

我包括jquery然后jquery ui，和 this

jquery ui css文件。

Answer 2

此处有一个工作版本（基于您的代码）：

https://jsfiddle.net/g3o7chw1/1/

我认为问题可能是ui主题css。当我使用常规主题cdn它似乎工作正常： https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css

Answer 3

我认为这是因为您的脚本CDN src链接没有http协议。而不是：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

你应该：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

Answer 4

看起来你有两个问题。首先，如果您粘贴的代码准确无误，那么您在调用ready()方法时遇到问题：

;(jQuery.ready(function()
{
    jQuery('#tabs').tabs();
}()));

如你所说，不会产生任何错误。但是，它也没有做任何事情！清除多余的parens和分号，您的代码如下所示：

jQuery.ready(function()
{
    jQuery('#tabs').tabs();
});

现在，问题在于，在调用tabs()方法之前，您没有说明需要准备什么，因为您没有指定要应用ready()的选择器方法。这意味着您的tabs()方法永远不会被调用。

使用ready()方法，选择器应始终为document。因此，如果您将代码更改为：

jQuery(document).ready(function(){
{
    jQuery('#tabs').tabs();
});

你会发现你的tabs()函数被调用了。您会注意到JD E和John Detlefs将$替换为jQuery，这是常见的（实际上几乎无处不在）速记，但除此之外，这也是他们拥有它的方式。这是调用ready()的传统方式。（有两种等效的语法（你的不是其中之一），你可以阅读here。）

您的第二个问题似乎是兼容性问题：您的目录结构表明您使用的是jquery-ui.js v.1.11.4和jquery-ui.css v.1.12.0。如果是这样，你肯定会遇到问题，因为1.12.0实现了很多重大变化。看看this document。在其中，在标签下的部分中，您将找到：

tabs小部件现在将ui-tabs-tab类添加到每个tab元素而不是命名不一致的ui-tab。

如果你实际上有你的目录结构建议的.js和.css文件的不同版本，你可能会有.js文件应用ui-tab类，而.css文件正在寻找ui-tabs-tab的课程。因此，除非他们具有向后兼容性，否则您将无法获得样式。在某些情况下他们没有。（更新：查看JD E在其答案中提供的链接，我没有看到任何有关此更改的证据。有ui-tab的几个引用，ui-tabs-tab没有引用。自1.12.0以来仅在三周前发布，也许这是一个从未实际发生的记录变化，他们还没有时间记录它。但如果我是你，我仍然可以保持我的版本一致。）

我建议您确保您的jquery-ui.js和jquery-ui.css文件是相同的版本。如果你不需要支持IE，我建议你去1.12.0。如果你这样做，那么你需要研究哪个版本的jQuery UI支持哪个版本的IE。（1.12.0删除了对IE 10及更早版本的支持。）此外，您的jquery.js版本此时已有三年，您可能会考虑升级。最新版本现在是3.1.0（最近发布），2.2.4已经存在了一段时间。

插入jQuery UI还需要做些什么？

4 个答案: