jquery - Jquery UI 选项卡不适用于 .tabs() 函数

Question

我对 JQUERY 完全陌生，我有一个项目，我必须在其中使用 JQUERY UI 选项卡我下载了一个 UI 选项卡并按照此处列出的所有说明进行操作， 我的 html 代码是：

   <div id="tab">
    <ul class="tabs">
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
        <li><a href="#tabs-3">Tab3</a></li>
    </ul> 
    <div class="tab-content" id="tabs1">Tab1</div>
    <div class="tab-content" id="tabs2">Tab2</div>
    <div class="tab-content" id="tabs3">Tab3</div> </div>

我的 JQUERY 函数是：

    <script type="text/javascript">

    $(document).ready(function () {
        $('#tab').tabs();
    });
</script>

问题是当我运行该页面时，它显示如下输出：

而且我无法使用标签导航...我将非常感谢您在这方面的帮助

在此先感谢并寻求您的及时帮助

Answer 1

选项卡按钮中的链接：

<li><a href="#tabs-1">Tab1</a></li>
<li><a href="#tabs-2">Tab2</a></li>
<li><a href="#tabs-3">Tab3</a></li>

需要匹配id选项卡的属性。您的链接使用tabs-1、tabs-2和 ，tabs-3但您的选项卡使用tabs1、tabs2和tabs3。

演示：http: //jsfiddle.net/ambiguous/kbfjS/

Answer 2

将内容 div 重命名为此，你得到了 dash -。

<div class="tab-content" id="tabs-1">Tab1</div>
<div class="tab-content" id="tabs-2">Tab2</div>
<div class="tab-content" id="tabs-3">Tab3</div>