jquery - jQuery UI タブをコンテンツから分離する

Question

ヘイガイズ!!

jQuery UI タブで小さな問題に直面しています。問題は、デフォルトの動作としてコンテンツの後にタブがあることです。コンテンツの前にある必要があります。

HTML:

<div id="verticalTabs">  
  <div class="verticalTabsContent">
    <div id="tab1" class="tab-content">djfhksdf kdsh kfh </div>
    <div id="tab2" class="tab-content">Content for Tab2 goes here</div>
    <div id="tab3" class="tab-content">Content for Tab3 goes here</div>
    <div id="tab4" class="tab-content">Content for Tab4 goes here</div>
  </div>
  <ul id="tabGroup">
    <li><a href="#tab1">Title_1</a></li>
    <li><a href="#tab2">Title_2</a></li>
    <li><a href="#tab3">Title_3</a></li>
    <li><a href="#tab4">Title_4</a></li>
  </ul>
</div>

jQuery

$(function() {
   $( "#verticalTabs" ).tabs();
});

それはうまくいっています。しかし、問題は、コンテンツにリスト (ul - li) を取得するときです。jQueryは、元のタブではなくタブと見なします。

<div id="verticalTabs">  
  <div class="verticalTabsContent">
    <div id="tab1" class="tab-content">
      <ul>
        <li>something</li>
      </ul>
    </div>
    <div id="tab2" class="tab-content">Content for Tab2 goes here</div>
    <div id="tab3" class="tab-content">Content for Tab3 goes here</div>
    <div id="tab4" class="tab-content">Content for Tab4 goes here</div>
  </div>
  <ul id="tabGroup">
    <li><a href="#tab1">title_1</a></li>
    <li><a href="#tab2">title_2</a></li>
    <li><a href="#tab3">title_3</a></li>
    <li><a href="#tab4">title_4</a></li>
  </ul>
</div>

タブをコンテンツから分離したり、タブセクションを手動で定義したりできる方法はありますか