如何正确使用jquery'；s tabs（）函数？

在我的Grails应用程序中，我有一个GSP，看起来有点像这样：

<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>foo</p></div>
    <div id="tabs-2"><p>bar</p></div>
    <div id="tabs-3"><p>zip</p></div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#tabs").tabs();
    });
</script>

福

酒吧

拉链

jQuery（文档）.ready（函数（）{
jQuery（“#tabs”）.tabs（）；
});

如果我理解正确，jQuery tabs（）调用应该使我的“tabs”div看起来像一个选项卡式面板。对吗？如果是这样，它就不起作用了。它只是呈现为一个正常的ul

---

有什么想法吗？

是jQuery UI的一部分，它是jQuery的扩展。您需要在页面上安装jquery UI。请参阅以开始使用jQuery UI。

如果您有脚本而没有CSS文件，那么您将一事无成

---

要获得jQueryUi框架以及CSS文件和脚本的捆绑包，请使用meroller:

我建议不要为jQuery或jQueryUi的插件而烦恼。相反，只需将JS下载到web app/JS文件夹中即可。然后使用传统标记引用它们，但也使用grails“resource”标记库，ala

<script type="text/javascript" src="${resource(dir:'js',file:'jquery.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'jquery-ui.js')}"></script>
<link rel="stylesheet" href="${resource(dir:'css',file:'jquery-ui.css')}" />

---

我喜欢在很多事情上使用插件，但对于一些简单的JS库，我只是看不到足够的价值。jQuery插件有一点价值，因为它提供了一个grails类，实现了对“remote*”taglibs（ala）的jQuery支持，但我从来没有这样做过，因为我喜欢直接使用jQuery

好的，谢谢大家的帮助。以下是最终奏效的方法：

我获得了jquery和jquery ui发行版，并将它们直接解压缩到我的web应用程序文件夹中

我使用了以下标签：

<g:javascript library="jquery-1.6.2.min"/>
<g:javascript library="jquery-ui-1.8.16.custom.min"/>
<link rel="stylesheet" href="${resource(dir:'css/smoothness',file:'jquery-ui-1.8.16.custom.css')}" />

---

请注意，我忘记链接到相应的css。事实证明，正确操作有点奇怪。

在ApplicationResources.groovy中：

modules = {
    application {
        resource url:'js/application.js'
    }
    jqueryui {
        resource url:'js/jquery-ui-1.10.2.custom.min.js'
    }
}

在gsp文件中，只需在头部添加以下内容：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<r:require module="jqueryui" />
<script>
    $(document).ready(function() {
        $("#tabs").tabs();
    });
</script>

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

是的，我已经安装了jquery，并确认基本功能正常。也就是说，我有很多工作要做：jQuery（document）.ready（function（）{alert（“hi”）；}）。因此，alert（）可以工作，但tabs（）不能。tabs是jQuery UI的一部分，是jQuery的扩展，必须单独安装。我已经安装了jQuery UI插件，并在GSP中添加了“”。但是tabs（）调用似乎仍然没有效果。如何确认jQueryUI安装正确？请检查页面的HTML源代码，并查看是否有引用jQueryUIJavaScript文件的脚本标记。还要检查开发人员控制台，看看脚本是否生成错误。我在GSP中添加了一行“”。这将（正确地）转换为行“”。但是，tabs（）行似乎仍然没有效果。好的，我获得了jquery和jquery ui发行版，并将它们放在web app/js中。我修改了标签，使其看起来像这样：但是，它似乎仍然不起作用。