0

我试图让 JQuery 选项卡（不是 UI）在创建动态选项卡和从 php 文件加载动态内容时播放得很好。php 文件返回一些表格、css 和图像。一切都按预期加载。我正在尝试通过 href 链接创建其他选项卡。一切似乎都在工作，除了创建的初始默认选项卡内容容器在创建其他选项卡或单击以激活时不会隐藏。相反，附加选项卡的内容会添加到初始内容容器的底部。如果我用简单的“Hello World”替换我的 php 文件，一切正常。我已经梳理了 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>的 inside tabcontent 不会嵌套<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 回答