Вкладка JQuery не скрывается

Я пытаюсь заставить 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">&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>

Любая помощь будет принята с благодарностью!


person GSMACK    schedule 11.07.2012    source источник


Ответы (1)


Ваш <p></p> в 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.

person Sidd    schedule 11.07.2012
comment
Я внес изменения, как вы предложили в моем онлайн-примере, и оно скрывает исходное содержимое при создании новой вкладки, однако содержимое второй и третьей вкладок просто добавляется в конец предыдущего содержимого. И если вы попытаетесь щелкнуть каждую вкладку, содержимое не скрывается и не появляется снова. Мне не нужны центральные теги, они просто служат для центрирования ссылок для тестирования и исчезнут. - person GSMACK; 12.07.2012
comment
@GSMACK, я отредактировал свой ответ. Проверить историю редактирования. Кроме того, я заметил, что нет функции, которая привязывает клики к вкладкам для отображения их содержимого. Попробуйте открыть все вкладки и щелкнуть другие вкладки, не закрывая их. Содержание не меняется. - person Sidd; 12.07.2012
comment
Функция addtab включает привязку # close + count при создании вкладки для обработки нажатия каждой вкладки. В моем онлайн-примере на tabs.html я удалил центральные теги и снова изменил все на #tabcontent p.hide. Я также изменил файл .php, чтобы он возвращал только 1 таблицу, чтобы ограничить пространство. Вы заметите, если вы добавите все вкладки, а затем щелкнете их по отдельности, вкладки 1,2,3 все заменят содержимое друг друга при нажатии вкладки. Это просто первая внутренняя вкладка, которая не скрывается. - person GSMACK; 12.07.2012
comment
Кроме того, я создал tabs2.html и заменил .get файла php, чтобы просто показать текст и все работает отлично. Похоже, что загрузка css и таблиц из файла php разрушает код. Если вы просмотрите источник test7.php, вы не найдете ни ошибок разметки, ни имени элемента. конфликты, и просто стандартные css и table. - person GSMACK; 12.07.2012