如何让 jQuery 选项卡正常工作？

发布于 2024-12-10 20:42:46 字数 1305 浏览 0 评论 0原文

我正在使用这个示例：

并尝试让选项卡像在线框上一样工作或至少关闭： http://problemio.com/wireframe.pdf到目前为止

我所拥有的是这个查询：

$(function()
{
          $( "#tabs" ).tabs();
          ...

和这个html：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First Tab</a></li>
        <li><a href="#tabs-2">Second Tab</a></li>
        <li><a href="#tabs-3">Third Tab</a></li>
    </ul>
    <div id="tabs-1">
        <p>First tab stuff</p>
    </div>
    <div id="tabs-2">
        <p>Second tab stuff</p>
    </div>
    <div id="tabs-3">
        <p>Third tab stuff</p>
    </div>
</div>

但由于某种原因，这根本不起作用，只是将表格显示为不执行任何操作的链接。我正在导入这个js：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

我做错了什么？

原文

I am working from this example:

http://jqueryui.com/demos/tabs/

and trying to get the tabs to work like they look on this wireframe or at least close: http://problemio.com/wireframe.pdf

What I have so far is this query:

$(function()
{
          $( "#tabs" ).tabs();
          ...

and this html:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First Tab</a></li>
        <li><a href="#tabs-2">Second Tab</a></li>
        <li><a href="#tabs-3">Third Tab</a></li>
    </ul>
    <div id="tabs-1">
        <p>First tab stuff</p>
    </div>
    <div id="tabs-2">
        <p>Second tab stuff</p>
    </div>
    <div id="tabs-3">
        <p>Third tab stuff</p>
    </div>
</div>

But for some reason this doesn't work at all and just shows the tabls as links that don't do anything. I am importing this js:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

What am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苦行僧 2024-12-17 20:42:46

我自己已经经历过这个问题。就我而言，我忘记添加 jquery UI 插件的 css 引用。您似乎也没有添加它们。

你能仔细检查一下你是否包含了CSS吗？您应该能够使用 googleapis CDN - 例如：

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css

在这里您将找到可用主题的列表：JQuery-UI 博客 - v1.8.16。他们还提供各种可用 CDN 位置的链接（上面的链接取自那里）。

Already experienced this issue myself. In my case, I'd forgot to add the css references for the jquery UI plugin. You don't seem to be adding them either.

Could you doublecheck if you have included the css? You should be able to use googleapis CDN - for example:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css

Here you will find the list of available themes: JQuery-UI Blog - v1.8.16. They also provide links to the various available CDN locations (the above link was taken from there).

回复收藏 0 原文