Использование функций appendTo и Load in click

Question

jQuery, новичок и первый постер.Пожалуйста, будьте осторожны :-) Я искал и не могу найти ответ, но я уверен, что есть действительно простое решение.

Надеясь, что кто-то может мне помочь.Вот что я пытаюсь достичь: у меня есть ряд вкладок со всеми, кроме первой вкладки, использующей функцию щелчка для загрузки () внешней страницы в требуемый div.Содержание первой вкладки будет загружено по умолчанию не из внешнего файла, а из уже существующего на странице элемента div, но далее по коду для оптимизации SEO.

При нажатии любой другой вкладки содержимое загружается из внешнегостраницы в div, но если вы затем захотите вернуться на вкладку 1, контент будет недоступен, так как он был заменен контентом из load () - т.е. больше не в DOM.

Полагаю, я мог бы добавить#temp div перед вызовом load (), а затем добавить обратно, если щелкнуть ссылку tab 1, но должно быть более элегантное решение?

Вот код на данный момент:

$(document).ready(function(){

    // default tab1 content div appended to containing div OK
    $("#innerDiv1").appendTo("#outerDiv");

    // tab2 link loads page2.html OK
    $("#link2").click(function(){
        $("#outerDiv").load("page2.html");
    });

    // This doesn't work as it's no longer in the DOM after #link2 clicked.
    $("#link1").click(function(){
        $("#innerDiv1").appendTo("#outerDiv");
    });

});

Любые мысли и ответы с благодарностью.

Заранее спасибо M

Answer 1

Большинство систем вкладок имеют отдельный контейнер содержимого для каждой вкладки. Нажатие на вкладку скрывает видимый контент и отображает скрытый контент, связанный с текущей выбранной вкладкой. Похоже, все, что вы делаете, это каждый раз стираете html, что требует гораздо больших усилий при написании кода.

Более надежные системы вкладок, такие как jQuerUI, имеют встроенные опции ajax, чтобы упростить большую часть того, что вам нужно. Поскольку вы говорите, что вы новичок в этом ... было бы хорошо использовать решения, которые также обеспечивают отличную поддержку, такие как jQueryUI

http://jqueryui.com/demos/tabs/

Answer 2

Вы можете попробовать виджет jQuery tabs: http://jqueryui.com/demos/tabs/

Это должно упростить создание интерфейса с вкладками, и вы можете просто включить все содержимое сразу или загрузить через AJAX, это гибковиджет.

Answer 3

Измените обработчик клика #link1 следующим образом:

$("#link1").click(function() {
   $("#outerDiv").load('originalurl.html #innerDiv1');
});

, который использует AJAX для загрузки начальной страницы, но только захватывает раздел '# innerDiv1' и заменяет содержимое #outerdiv на него,Вам нужно будет заменить originalurl.html на свой фактический URL-адрес ... возможно, вы можете использовать location.href, если вы не обновите его для закладок?

Answer 4

Я бы где-нибудь сохранял содержимое каждого #outerDiv для каждой вкладки. Вы можете использовать метод данных jQuery . Или вы создаете .outerDiv для каждой вкладки, загружаете содержимое в первый раз, а затем показывает только .outerDiv активной вкладки и скрываете остальные.