Javascript JQuery选项卡未隐藏_Javascript_Jquery_Jquery Tabs

Javascript JQuery选项卡未隐藏

javascript jquery

Javascript JQuery选项卡未隐藏,javascript,jquery,jquery-tabs,Javascript,Jquery,Jquery Tabs,我试图在创建动态选项卡和从php文件加载动态内容时，让JQuery选项卡（而不是UI）发挥作用。php文件将返回一些表、css和图像。一切按预期进行。我正在尝试通过href链接创建其他选项卡。除了创建的初始默认选项卡内容容器在创建其他选项卡或单击以激活其他选项卡时不会隐藏外，所有内容都正常工作。相反，附加选项卡的内容添加到初始内容容器的底部。如果我用一个简单的“Hello World”替换我的php文件，那么一切都很好。我已经梳理了php数据，html中没有冲突的元素名称。没有什么特别的，只有h

我试图在创建动态选项卡和从php文件加载动态内容时，让JQuery选项卡（而不是UI）发挥作用。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;
        });
    }
});

$（函数（）{
var total_tabs=0；
var-pId=0；
var pName=“”；
//初始化第一个选项卡
addtab（总计选项卡，pId，“服务器详细信息”）；
$（“a.tb_showTab”）。单击（函数（）{
总标签数++；
var vId=$（this.attr（'hash'）.replace（'#'，''）；
var pValues=分割分割（“|”）；
$（“#tabp”）.hide（）；
addtab（总计选项卡，pValues[1]，pValues[0]）；
返回false；
});
函数addtab（计数、pId、pName）{
var closetab=''；
//默认选项卡上没有关闭按钮
如果（pId==0 | | pId==1）{closetab=”“}；
//创建选项卡
$（“#tabul”）.append（““+pName+”+closetab+””）；
//创建选项卡内容
如果（pId==0）{
//加载服务器详细信息
$.get（“test5.php”，
{nbRandom:Math.random（）}，
功能（数据）{
$（“#tabcontent”）.append（““+data+””）；
});
}
否则如果（pId==1）{
//负载组详细信息
//最终将其替换为php文件中的动态内容
$（“#tabcontent”）.append（““+pName+”内容放在这里！！
id=“+pId+””）；
}
否则{
//装载人员详细信息
//最终将其替换为php文件中的动态内容
$（“#tabcontent”）.append（““+pName+”内容放在这里！！
id=“+pId+””）；
}
$（“tabul li”）.removeClass（“ctab”）；
$（#t+count）.addClass（“ctab”）；
$（“#t”+count）.bind（“单击”，函数（）{
$（“tabul li”）.removeClass（“ctab”）；
$（#t+count）.addClass（“ctab”）；
$（“#tabp”）.hide（）；
$（#c+count）.fadeIn（'slow'）；
});
$（“#关闭”+计数）。绑定（“单击”，函数（）{
//激活上一个选项卡
$（“tabul li”）.removeClass（“ctab”）；
$（“#tabp”）.hide（）；
$（this.parent（）.prev（）.addClass（“ctab”）；
$（“#c”+count）.prev（）.fadeIn（'slow'）；
$（this.parent（）.remove（）；
$（“#c”+count）.remove（）；
返回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>

|
|

任何帮助都将不胜感激

选项卡内容中的

没有嵌套实际内容所在的

标记。尝试下面的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;
    });
}
});

$（函数（）{
var total_tabs=0；
var-pId=0；
var pName=“”；
//初始化第一个选项卡
addtab（总计选项卡，pId，“服务器详细信息”）；
$（“a.tb_showTab”）。单击（函数（）{
总标签数++；
var vId=$（this.attr（'hash'）.replace（'#'，''）；
var pValues=分割分割（“|”）；
$（“#选项卡资源中心”）.hide（）；
addtab（总计选项卡，pValues[1]，pValues[0]）；
返回false；
});
函数addtab（计数、pId、pName）{
$（“#tabp”）.hide（）；
var closetab=''；
//默认选项卡上没有关闭按钮
如果（pId==0 | | pId==1）{closetab=”“}；
//创建选项卡
$（“#tabul”）.append（““+pName+”+closetab+””）；
//创建选项卡内容
如果（pId==0）{
//加载服务器详细信息
$.get（“test5.php”，
{nbRandom:Math.random（）}，
功能（数据）{
$（“#tabcontent”）.append（““+data+””）；
});
}
否则如果（pId==1）{
//负载组详细信息
//最终将其替换为php文件中的动态内容
$（“#tabcontent”）.append（““+pName+”内容放在这里！！
id=“+pId+””）；
}
否则{
//装载人员详细信息
//最终将其替换为php文件中的动态内容
$（“#tabcontent”）.append（““+pName+”内容放在这里！！
id=“+pId+””）；
}
$（“tabul li”）.removeClass（“ctab”）；
$（#t+count）.addClass（“ctab”）；
$（“#t”+count）.bind（“单击”，函数（）{
$（“tabul li”）.removeClass（“ctab”）；
$（#t+count）.addClass（“ctab”）；
$（“#选项卡资源中心”）.hide（）；
$（#c+count）.fadeIn（'slow'）；
});
$（“#关闭”+计数）。绑定（“单击”，函数（）{
//激活上一个选项卡
$（“tabul li”）.removeClass（“ctab”）；
$（“#tabp”）.hide（）；
$（this.parent（）.prev（）.addClass（“ctab”）；
$（“#c”+count）.prev（）.fadeIn（'slow'）；
$（this.parent（）.remove（）；
$（“#c”+count）.remove（）；
返回false；
});
}
});

请注意，本质上，我刚刚将

$（“#tabcontent p”）

部分更改为

$（“#tabcontent center”）

。如果这不是您想要的html输出，您可能需要再次查看html。

我已经按照您对联机示例的建议进行了更改，在创建新选项卡时，它确实隐藏了初始内容，但是第二个和第三个选项卡的内容只是附加到先前内容的底部。如果你试着点击eac