Jquery-UI选项卡不工作

问题描述：

所以我试图制作JQuery UI框架的选项卡，但我无法让它们工作。它只是作为一个项目符号列表显示出来，然后与所有的div一起显示出来。我读过另一篇文章，你需要某种我以前没有的css /主题，所以我下载了一个自定义主题。我将它解压缩到我的媒体文件夹中，并创建了js，css和development-bundle文件夹。Jquery-UI选项卡不工作

我有页面中包含两个js脚本，我检查了铬开发工具，以确保他们正在加载，他们是。我也ahve在我的文件中的以下代码：

<head> 
<script type='text/javascript'> 
$(document).ready(function(){ 
    $("#tabs").tabs(); 
}); 
</script> 
</head> 
<div id='tabs'> 
    <ul> 
     <li><a href='#tabs-1'>Manage Categories</a></li> 
     <li><a href='#tabs-2'>Add Forms</a></li> 
     <li><a href='#tabs-3'>Change Forms</a></li> 
    </ul> 
    <div id='tabs-1'> 
     <h4>Current Categories</h4> 
     {% for category in categories %} 
      <a href='/admin/fm/delcat/{{ category }}/'>Delete</a> &nbsp;&nbsp;&nbsp; {{ category }}<br /> 
     {% endfor %} 
    </div> 
    <div id='tabs-2'> 
     <p> stuff</p> 
    </div> 
    <div id='tabs-3'> 
     <p>stuff</p> 
    </div> 
</div>

不知道为什么它不工作。

答

您需要包含JQuery UI CSS文件。

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

这应该做到这一点。

答

为了重现您所描述的内容，我必须省略样式表。这表明你还没有完全掌握CSS部分。

了jQuery网站上的标签示例代码是一个良好的开端，这是我复制了以下内容，然后在你的代码的顶部粘贴

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

Jquery-UI选项卡不工作

相关推荐