Jquery-UI选项卡不起作用

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 个解决方案

解决方案1
8 已采纳 2010-01-16 07:26:20

解决方案2
0 2010-01-16 07:32:50

Jquery-UI选项卡不起作用

问题描述

2 个解决方案

解决方案1 8 已采纳 2010-01-16 07:26:20

解决方案2 0 2010-01-16 07:32:50

解决方案1
8 已采纳 2010-01-16 07:26:20

解决方案2
0 2010-01-16 07:32:50