jQuery UI选项卡未正确显示

我正在创建jQueryUI选项卡，但所有选项卡都显示所有内容的静态，该选项卡工作不正常，不可选择。（我没有足够的声誉在div id=“tabs-1”中使用的标签1（href attr）中发布图像>

我认为改变

“

到

“

---

将完成此操作

您正在创建对

tab-n

的li引用，但相关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='
'+'
'；
$（'ul#tabtitle'）。追加（$（tabtitle））；
var-tabcontent=''；

进入：

var tabtitle='
'+'
'；
$（'ul#tabtitle'）。追加（$（tabtitle））；
var-tabcontent=''；

演示：

编辑

---

因为您是通过jQuery

get

加载xml的，所以必须在get回调函数的末尾执行

tabs

方法。

您的演示非常有用！我修复了这个错误，但是我从xml读取数据的方法有缺陷，因此仍然无法正确显示。您知道如何修复它吗？谢谢。我修复了第二个错误：$（#tabs”）.tabs（）应该在答案中添加的get{}.=）中；在fiddle中，问题不存在，因为xml是使用jQuery get硬编码的，而不是get。

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

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 + '">';