Question

我试图将大量内容放入jquery标签中以使其看起来更好，但我尝试的所有内容都不起作用，我还留下了一些子弹点由所有的divs。我已经完成了我可以找到的所有问题，并应用了更改等，但它仍然没有。此外，我已将示例从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

有几个问题。首先，将“＃”添加到您的选择器中，并将其包装在doc中，如下所示：

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

没有#，jQuery正在寻找一个标签名为传记的元素，而不是一个带有传记ID的元素。

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

<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选项卡不会按预期显示

1 个答案: