Может кто сталкивался

? Пишу простой редактор с возможностью использования табов для смены документа и создания нового документа. На официальном
сайте код кнопки таба и контент помещается в одном теге с ID id="tabs":
<div id="tabs">
<ul>
<li><a href="#tabs-1">Кнопка таба 1</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
<li><a href="#tabs-2">Кнопка таба 2</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
</ul>
<div id="tabs-1">
<p>Контент таба 1</p>
</div>
<div id="tabs-2">
<p>Контент таба 2</p>
</div>
</div>
Мне нужно, чтобы он активировал тот таб, который соответствует его кнопке, но вместо этого выводит ошибку:
Error: jQuery UI Tabs: Mismatching fragment identifier.
А у меня в проекте и кнопки и контент находятся в разных местах и соответственно ID будет у каждого будет разный. Ломаю голову, не получается, все затруднено еще тем, что jQueryUI добавляет собственные классы и стили в процессе работы виджета и какой куда добавляет сразу не могу понять
