jQuery 标签未按预期显示

Question

我正在尝试将大量内容放入 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 中打开它，但它们都显示相同。我已经将它上传到我的网站，看看它在直播时是否有效，但没有任何作用。谁能帮帮我？！

提前致谢！

Answer 1

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

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

如果没有 #，jQuery 正在查找标签名称为 biography 的元素，而不是 ID 为 biography 的元素。

接下来，删除选项卡导航锚点内的 span，如下所示：

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

jQuery 标签未按预期显示

jQuery tabs don't display as expected

jquery

jquery-ui

jquery-ui-tabs