Question

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

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

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

不确定为什么它不起作用。

Answer 1

您需要包含JQuery UI CSS文件。

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

应该这样做。

Answer 2

为了重现你描述的内容，我不得不省略样式表。这表明你还没有完成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选项卡不起作用

2 个答案: