jquery - jQuery UI 选项卡未正确显示

Question

我正在创建 jQuery UI 选项卡，但所有选项卡都显示所有内容都是静态的，选项卡无法正常工作，无法选择。（我没有足够的声誉来发布图片><）数据来自 XML 文件。

这是代码：（我在头部有所有链接和脚本）在 HTML 中：

<div id="tabs">
    <ul id="tabtitle">
    </ul>
</div>

我的.js文件：

$(document).ready(function(){
    var i = 1;
    $.get('data.xml', function(d){
        $(d).find('page').each(function(){

            var $page   = $(this),
            title       = $page.find('title').text(),
            description = $page.find('description').text(),

            var tabtitle = '<li><a href="#tab-' + i + '">' + title + '</a>' + '</li>';
            $('ul#tabtitle').append($(tabtitle));

            var tabcontent = '<div id="tabs-' + i + '">';
            tabcontent += '<p> ' + description + '</p>' ;
            tabcontent += '</div>';
            $('#tabs').append($(tabcontent));

            i++;
        });
    });
    $( "#tabs" ).tabs();
});

我的 XML 文件：

<?xml version="1.0" encoding="UTF-8"?>
<Pages>
    <page>
        <title>Tab1</title>
        <description>content for Tab1 here</description>
    </page>
    <page>
        <title>Tab2</title>
        <description>content for Tab2 here</description>
    </page>
    <page>
        <title>Tab3</title>
        <description>content for Tab3 here</description>
    </page>
    <page>
        <title>Tab4</title>
        <description>content for Tab4 here</description>
    </page>
</Pages>

Answer 1

您正在创建对 li 的引用tab-n，但调用了相关的 div tabs-n。

所以没有匹配，你会面临这个问题；您可以通过注释 tabs 方法并检查 DOM 来检查问题。

尝试改变这个：

var tabtitle = '<li><a href="#tab-' + i + '">' + title + '</a>' + '</li>';
$('ul#tabtitle').append($(tabtitle));

var tabcontent = '<div id="tabs-' + i + '">';

进入：

var tabtitle = '<li><a href="#tab-' + i + '">' + title + '</a>' + '</li>';
$('ul#tabtitle').append($(tabtitle));

var tabcontent = '<div id="tab-' + i + '">'; 

演示：http: //jsfiddle.net/WcgyA/

编辑

因为您正在通过 jQuery 加载 xml ，所以您必须在 get 回调函数的末尾get执行您的方法。tabs

Answer 2

在标签中，您在 div id="tabs-1" 中使用 tab-1 (href attr) 吗？

我想改变

'

<a href="#tab-' + i + '">

至

'

<a href="#tabs-' + i + '">

会成功的