jQuery 选项卡未按预期显示答案

【问题标题】：jQuery tabs don't display as expectedjQuery 选项卡未按预期显示
【发布时间】：2015-05-20 16:32:20
【问题描述】：

我正在尝试将大量内容放入 jquery 选项卡中以使其看起来更好，但我尝试的一切都不起作用，我留下了一些要点，然后是所有 div。我已经完成了我能找到的所有问题，并应用了更改等，但它仍然没有。此外，我已将 jquery 站点中的示例复制到我的文本编辑器中并打开它，但他们自己的示例也无法正确显示。

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.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>

<style type="text/css">

body {
    font-family:verdana, helvetica;
    font-size:0.8em;
}


</style>

<div>
    <p>intro </p>
</div>

<div id="biography">
    <ul>
        <li><a href="#one"><span>one</span></a></li>
        <li><a href="#two"><span>two</span></a></li>
        <li><a href="#three"><span>three</span></a></li>
        <li><a href="#four"><span>four</span></a></li>
        <li><a href="#five"><span>five</span></a></li>
    </ul>

<div id="one">
    <p>text</p> 
</div>

<div id="two">
    <p>text</p>
</div>

<div id="three">
    <p>text</p> 
</div>

<div id="four">
    <p>text</p>
</div>

<div id="five">
    <p>text</p>
</div>

</div>

<script>
    $("biogaphy").tabs();
</script>

我对这一切还是很陌生，所以我可能会遗漏一些明显的东西。我已经尝试删除设置字体但不起作用的 css，就像我说的那样，我已经从站点运行 example 并且它也不会显示为选项卡。我试过用chrome、firefox和ie打开它，但它们都显示相同。我已经将它上传到我的网站，看看它在直播时是否有效，但什么也没做。谁能帮帮我？！

提前致谢！

【问题讨论】：

小提琴将有助于为您提供解决方案。
jqueryui.com 引用的文件不存在并抛出 404 错误。

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

有几个问题。首先，将“#”添加到您的选择器中，然后包装在一个准备好的文档中，如下所示：

$(document).ready(function () {
    $("#biography").tabs();
});

没有#，jQuery 会寻找标签名称为 biography 的元素，而不是 ID 为 biography 的元素。

接下来，删除标签导航锚点内的跨度，如下所示：

<div id="biography">
    <ul>
        <li>
            <a href="#one">one</a>
        </li>
        <li>
            <a href="#two">two</a>
        </li>
        <li>
            <a href="#three">three</a>
        </li>
        <li>
            <a href="#four">four</a>
        </li>
        <li>
            <a href="#five">five</a>
        </li>
    </ul>
    <div id="one">
        <p>text 1</p>
    </div>
    <div id="two">
        <p>text 2</p>
    </div>
    <div id="three">
        <p>text 3</p>
    </div>
    <div id="four">
        <p>text 4</p>
    </div>
    <div id="five">
        <p>text 5</p>
    </div>
</div>

See it work in this fiddle

并完全删除这些行：

<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/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

【讨论】：