将jQuery UI选项卡与内容分开

嘿，伙计们

我在jQueryUI选项卡中遇到了一个小问题。问题是，我在我的内容后面有标签，默认情况下，标签应该在内容之前

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>

很好用。但问题是当我在内容中获取列表（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>

某物

Tab2的内容在这里
Tab3的内容在这里
Tab4的内容在这里

---

是否有任何方法可以将我的选项卡与内容分开，或手动定义选项卡部分

请在上发布一个功能示例，说明您的问题。

<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>