JQuery Tab不隱藏

Question

我想在創建動態選項卡和從php文件加載動態內容的時候獲得一個JQuery選項卡（不是UI）來播放它。 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

您在標籤內容中的<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。