Question

我正在尝试使用JQuery Tab（而不是UI）在创建动态选项卡和从php文件加载动态内容时发挥出色。 php文件返回几个表，css和图像。一切都按预期加载。我想通过href链接创建其他标签。除了创建或单击其他选项卡处于活动状态时，创建的初始默认选项卡内容容器不会隐藏，因此一切似乎都有效。相反，附加选项卡的内容将添加到初始内容容器的底部。如果我用简单的'Hello World'替换我的php文件，一切正常。我已经通过php数据进行了梳理，并且html中没有冲突的元素名称。没什么好看的，只有html，css和图像。

您可以看到示例演示here。

这是我的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>

非常感谢任何帮助!!

Answer 1

tabcontent中的<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。

JQuery Tab没有隐藏

1 个答案: