HTML+<tags>JQUERY移动

Question

我正在使用其他人开发的代码。它是一个用PHP，HTML和JQUERY（wordpress与woocomerce）开发的Web。

我需要在已经完成的选项卡中插入一些选项卡。问题是（我认为）被感动了。当我点击"查看源代码"时，我得到：

<script type="text/javascript">
   jQuery(function() {
      jQuery( "#tabs" ).tabs();
   });
</script>
<table class="variations-table" cellspacing="0">
<tbody>
   <div id="tabs">
      <ul>
         <li style="background:none;"><a href="#Americana">Americana</a></li>
         <li style="background:none;"><a href="#Chaleco">Chaleco</a></li>
         <li style="background:none;"><a href="#Pantalones">Pantalones</a></li>
      </ul>
      <table>
         <tbody>
            <div id="Americana">
               <tr>
                  <td class="label cabecera tejido" >
                     <label for="tejido" style="display:none"></label>
                     <p class="tejido-leo-black etiqueta etiqueta-1" >Tejido</p>
                     <input type="hidden" value="Leo Black" id="tejido" name="attribute_tejido" class="shopping">
                     <p class="seleccion select-1 select-tejido">Leo Black</p>
                     <div class="personalizar desplegable-1 abrir-1" >Personalizar</div>
                  </td>
               </tr>
            </div>
            <div id="Chaleco">
               <tr>
                  <td class="label cabecera tejido" >
                     <label for="tejido" style="display:none"></label>
                     <p class="tejido-leo-black etiqueta etiqueta-1" >Chaleco bolsillo</p>
                     <input type="hidden" value="Leo Black" id="tejido" name="attribute_tejido" class="shopping">
                     <p class="seleccion select-1 select-tejido">1 bolsillo</p>
                     <div class="personalizar desplegable-1 abrir-1" >Personalizar</div>
                  </td>
               </tr>
            </div>
            <div id="Pantalones">
               <tr>
                  <td class="label cabecera tejido" >
                     <label for="tejido" style="display:none"></label>
                     <p class="tejido-leo-black etiqueta etiqueta-1" >Chaleco bolsillo</p>
                     <input type="hidden" value="Leo Black" id="tejido" name="attribute_tejido"             
                        class="shopping">
                     <p class="seleccion select-1 select-tejido">1 bolsillo</p>
                     <div class="personalizar desplegable-1 abrir-1" >Personalizar</div>
                  </td>
               </tr>
            </div>
         </tbody>
      </table>
   </div>

但是，当我单击"检查元素"（Firefox 的 Chrome）时，标签div 会移出标签表：

    '<div id="tabs">
       <ul>
          <li style="background:none;"><a href="#Americana">Americana</a></li>
          <li style="background:none;"><a href="#Chaleco">Chaleco</a></li>
          <li style="background:none;"><a href="#Pantalones">Pantalones</a></li>
       </ul>
       <table>
       <tbody>
          <div id="Americana">
          </div>
    </div>
    <table class="variations-table" cellspacing="0">
    <tbody>
    <tr>
    <td class="label cabecera tejido" >
    <label for="tejido" style="display:none"></label>
    <p class="tejido-leo-black etiqueta etiqueta-1" >Tejido</p>
    <input type="hidden" value="Leo Black" id="tejido" name="attribute_tejido" class="shopping">
    <p class="seleccion select-1 select-tejido">Leo Black</p>
    <div class="personalizar desplegable-1 abrir-1" >Personalizar</div>
    </td>
    </tr>
    </div>
    <div id="Chaleco">
    <tr>
    <td class="label cabecera tejido" >
    <label for="tejido" style="display:none"></label>
    <p class="tejido-leo-black etiqueta etiqueta-1" >Chaleco bolsillo</p>
    <input type="hidden" value="Leo Black" id="tejido" name="attribute_tejido" class="shopping">
    <p class="seleccion select-1 select-tejido">1 bolsillo</p>
    <div class="personalizar desplegable-1 abrir-1" >Personalizar</div>
    </td>
    </tr>
    </div>
    <div id="Pantalones">
    <tr>
    <td class="label cabecera tejido" >
    <label for="tejido" style="display:none"></label>
    <p class="tejido-leo-black etiqueta etiqueta-1" >Chaleco bolsillo</p>
    <input type="hidden" value="Leo Black" id="tejido" name="attribute_tejido" class="shopping">
    <p class="seleccion select-1 select-tejido">1 bolsillo</p>
    <div class="personalizar desplegable-1 abrir-1" >Personalizar</div>
    </td>
    </tr>
    </div>
    </tbody>
    </table>
    </div>'

我不知道这是否正常。

任何帮助赞赏。

提前谢谢。

Answer 1

你在这里有一个问题：

<tbody>
   <div id="tabs">
      <ul>

您不能只在<tbody>中抛出div，创建一个单元格（最好在一行之后），然后添加。

<tbody>
   <tr>
      <td>
         <div id="tabs">
            <ul>
         ...
      </td>
   </tr>
</tbody>