2

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

2 に答える 2

0

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

于 2013-10-24T19:30:51.813 に答える
0

タグでは、div id="tabs-1" で tab-1 (href attr) を使用しますか?

変わると思います

'

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

    に

    '

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

    トリックをするだろう

    • 于 2013-10-24T19:20:02.350 に答える