0

動的タブを作成し、phpファイルから動的コンテンツをロードするときにJQueryタブ（UIではない）をうまく再生しようとしています。phpファイルは、いくつかのテーブル、css、および画像を返します。すべてが期待どおりに読み込まれます。hrefリンクを介して追加のタブを作成しようとしています。作成された最初のデフォルトのタブコンテンツコンテナが、他のタブが作成またはクリックされてアクティブになったときに非表示にならないことを除いて、すべてが機能しているように見えます。代わりに、追加のタブのコンテンツが最初のコンテンツコンテナの下部に追加されます。phpファイルを単純な「HelloWorld」に置き換えると、すべてが正常に機能します。私はphpデータを調べましたが、htmlに競合する要素名はありません。何も派手なものはなく、html、css、および画像だけです。

ここでサンプルデモを見ることができます。

これが私のjsです：

$(function() {
    var total_tabs = 0;
    var pId = 0;
    var pName = "";

    //initialize first tab
    addtab(total_tabs,pId,"Server Details");

    $("a.tb_showTab").click(function() {
        total_tabs++;
        var vId = $(this).attr('hash').replace('#','');
        var pValues = vId.split('|');               
        $("#tabcontent p").hide();
        addtab(total_tabs,pValues[1],pValues[0]);
        return false;
    });

    function addtab(count,pId,pName) {
        var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
        //no close button on default tabs
        if (pId==0 || pId==1){closetab = ""};

        //Create Tab
        $("#tabul").append('<li id="t'+count+'" class="ntabs">'+pName+'&nbsp;&nbsp;'+closetab+'</li>');

        //Create Tab Content
        if (pId==0){
            //load Server Details
            $.get("test5.php",
                {nbRandom: Math.random() },
                function(data){
                    $("#tabcontent").append('<p id="c'+count+'">'+data+'</p>');
                });
            }
        else if (pId==1){
            //load Groups Details
            //eventually replace this with dynamic content from php file
            $("#tabcontent").append('<p id="c'+count+'">'+pName+' content goes here!!</br>ID='+pId+'</p>');
            }
        else {
            //load Person Details
            //eventually replace this with dynamic content from php file
            $("#tabcontent").append('<p id="c'+count+'">'+pName+' content goes here!!</br>ID='+pId+'</p>');
            }
        $("#tabul li").removeClass("ctab");
        $("#t"+count).addClass("ctab");

        $("#t"+count).bind("click", function() {
            $("#tabul li").removeClass("ctab");
            $("#t"+count).addClass("ctab");
            $("#tabcontent p").hide();
            $("#c"+count).fadeIn('slow');
        });

        $("#close"+count).bind("click", function() {
            // activate the previous tab
            $("#tabul li").removeClass("ctab");
            $("#tabcontent p").hide();
            $(this).parent().prev().addClass("ctab");
            $("#c"+count).prev().fadeIn('slow');

            $(this).parent().remove();
            $("#c"+count).remove();
            return false;
        });
    }
});

そしてここにhtmlがあります：

<a class="tb_showTab" href="#Tab_Name_1|11111" >Add Tab1</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="tb_showTab" href="#Tab_Name_2|22222" >Add a Tab2</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="tb_showTab" href="#Tab_Name_3|33333" >Add a Tab3</a>    

<div id="container">
    <ul id="tabul">
        <li id="litab" class="ntabs add"></li>
    </ul>            
<div id="tabcontent"></div>
</div>

どんな助けでも大歓迎です!!

4

1 に答える 1

0

あなたの内のタブコンテンツは、実際のコンテンツがそこにあるタグを<p></p>ネストしません。<center></center>次の js コードを試してください - これは動作するようです。

$(function() {
var total_tabs = 0;
var pId = 0;
var pName = "";

//initialize first tab
addtab(total_tabs,pId,"Server Details");

$("a.tb_showTab").click(function() {
    total_tabs++;
    var vId = $(this).attr('hash').replace('#','');
    var pValues = vId.split('|');               
    $("#tabcontent center").hide();
    addtab(total_tabs,pValues[1],pValues[0]);
    return false;
});

function addtab(count,pId,pName) {
    $("#tabcontent p").hide();
    var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
    //no close button on default tabs
    if (pId==0 || pId==1){closetab = ""};

    //Create Tab
    $("#tabul").append('<li id="t'+count+'" class="ntabs">'+pName+'&nbsp;&nbsp;'+closetab+'</li>');

    //Create Tab Content
    if (pId==0){
        //load Server Details
        $.get("test5.php",
            {nbRandom: Math.random() },
            function(data){
                $("#tabcontent").append('<p id="c'+count+'">'+data+'</p>');
            });
        }
    else if (pId==1){
        //load Groups Details
        //eventually replace this with dynamic content from php file
        $("#tabcontent").append('<p id="c'+count+'">'+pName+' content goes here!!</br>ID='+pId+'</p>');
        }
    else {
        //load Person Details
        //eventually replace this with dynamic content from php file
        $("#tabcontent").append('<p id="c'+count+'">'+pName+' content goes here!!</br>ID='+pId+'</p>');
        }
    $("#tabul li").removeClass("ctab");
    $("#t"+count).addClass("ctab");

    $("#t"+count).bind("click", function() {
        $("#tabul li").removeClass("ctab");
        $("#t"+count).addClass("ctab");
        $("#tabcontent center").hide();
        $("#c"+count).fadeIn('slow');
    });

    $("#close"+count).bind("click", function() {
        // activate the previous tab
        $("#tabul li").removeClass("ctab");
        $("#tabcontent p").hide();
        $(this).parent().prev().addClass("ctab");
        $("#c"+count).prev().fadeIn('slow');

        $(this).parent().remove();
        $("#c"+count).remove();
        return false;
    });
}
});

本質的に、私は$("#tabcontent p")部品を に変更しただけであることに注意してください$("#tabcontent center")。これが意図した html 出力でない場合は、html をもう一度確認する必要があります。

于 2012-07-11T20:24:07.287 に答える