javascript - HTML+JQUERY <标签> 已移动

Question

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

我需要在已经完成的 a 中插入一些选项卡。问题是(我认为)它们被移动了。当我点击“查看源代码”时，我得到:

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

但是，当我单击“Inspect Element”(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>

你不能只是抛出 div里面 <tbody> ，创建一个单元格(最好在一行之后)，然后添加。

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