JQuery вкладки - Динамические вкладки с innerhtml возможно?

Question

JQuery вкладки - Динамические вкладки с innerhtml возможно?

0

Я пытаюсь создать элемент вкладки jquery, изменив (заполняя) innerhtml тега div правильным html для вкладки jQuery.

Когда страница html загружается в первый раз, она правильно отображает вкладки. (Obvoiusly работает jquery css и html)

Когда я нажимаю кнопку, чтобы программно изменить innerhtml тега, чтобы загрузить новый контент (вкладки), таблица стилей, похоже, не обновляется, и я остаюсь с отображаемыми новыми маркерами href, а не вкладками.

Мой вопрос: я собираюсь сделать правильный путь (динамически загружать вкладки) или есть лучший способ сделать это? Должен ли я просто обновить встроенные таблицы стилей каким-то образом, чтобы исправить отображение?

Stefan 20 фев. 2014, в 11:20

Источник

Теги:

jquery

tabs

1 ответ

Ещё вопросы

Ian A · Accepted Answer · 2014-02-20T08-20-00.000Z

Трудно понять, что вы пытаетесь сделать без примера, но Java_User правильно использует обновление, предполагая, что вы хотите добавить новую вкладку.

Если HTML для вкладок выглядит следующим образом:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a> </li>
        <li><a href="#tabs-2">Tab 2</a> </li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Tab 2</p>
    </div> 
</div>

Новая вкладка может быть добавлена с помощью следующего кода:

// number of existing tabs
var num_tabs = $("#tabs ul li").length + 1;
// add new tab
$("#tabs ul").append("<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>");
// add tab content
$("#tabs").append("<div id='tab" + num_tabs + "'>#" + num_tabs + "</div>");
// refresh the content so they appear as 'tabs'
$("#tabs").tabs("refresh");

РЕДАКТИРОВАТЬ: Игнорируйте приведенное выше. Единственный способ заставить его работать - это уничтожить и воссоздать вкладки после ввода нового HTML. например:

// inject the HTML for the new tabs
$("#tabs").html("<ul><li><a href='#tabs-1'>New Tab 1</a></li><li><a href='#tabs-2'>New Tab 2</a></li></ul><div id='tabs-1'>New Tab 1</div><div id='tabs-2'>New Tab 2</div>");
// Destroy and recreate the tabs
$('#tabs').tabs('destroy').tabs();

Я попробую ваше предложение. В настоящее время я заменяю все содержимое <div id = "tabs"> новым html (соответствующим образом отформатированным для jquery), а затем вызываю метод refresh. Ниже приведен просто «уменьшенный» пример того, как я внедряю вкладки. ds = document.getElementById ("tabs"); ds.innerHTML = "<ul> <li> <a> </a> </ li> </ ul> <div> </ div>"; $ ( "# Вкладки") вкладки ( "обновить").