Я пытаюсь заставить JQuery Tab (не UI) хорошо работать при создании динамических вкладок и загрузке динамического контента из файла php. Файл php возвращает несколько таблиц, CSS и изображений. Все загружается, как ожидалось. Я пытаюсь создать дополнительные вкладки по ссылке href. Кажется, все работает, за исключением того, что созданный контейнер содержимого вкладок по умолчанию не скрывается, когда другие вкладки создаются или щелкают, чтобы стать активными. Вместо этого содержимое дополнительной вкладки добавляется внизу исходного контейнера содержимого. Если я заменю свой php-файл простым «Hello World», все будет работать нормально. Я просмотрел данные 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">×</a>';
//no close button on default tabs
if (pId==0 || pId==1){closetab = ""};
//Create Tab
$("#tabul").append('<li id="t'+count+'" class="ntabs">'+pName+' '+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> |
<a class="tb_showTab" href="#Tab_Name_2|22222" >Add a Tab2</a> |
<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>
Любая помощь будет принята с благодарностью!