jQuery 选项卡：从 div 和 li 自定义格式创建选项卡，而不是示例方式

Question

我正在尝试使用 Jquery 创建一些选项卡，J*查询 UI 选项卡*，从 Drupal 向我输出的这种格式...

我有几个选项来进行输出，但这是我选择的一个，但是没有一个与演示页面中给出的示例中的选项相似... 也许我可以使用 UI 选项卡 addtab 或其他方法中的方法来强制使用这种格式创建选项卡？

谁能帮我完成这个任务？

这是我的代码：

<div class="view-content">
    <div class="item-list">
      <h3>La base</h3>

      <ul>
        <li class="views-row views-row-1 views-row-odd views-row-first">
          <div class="views-field-field-imagen-miniatura-fid">
            <span class="field-content"><img height="57" width="67" class=
            "imagecache imagecache-lo_mas_leido_54_46 imagecache-default imagecache-lo_mas_leido_54_46_default"
            title="" alt="" src=
            "/sites/default/files/imagecache/lo_mas_leido_54_46/para_gustos_macetas.jpg" /></span>
          </div>

          <div class="views-field-title">
            <span class="field-content"><a href="/huerto-urbano/para-gustos-macetas">Para
            gustos, macetas</a></span>
          </div>

          <div class="views-field-teaser">
            <span class="field-content">Cada planta es un universo y tiene sus
            particularidades y caprichos pero, para hacernos una idea...</span>
          </div>

          <div class="views-field-view-node">
            <span class="field-content"><a href="/huerto-urbano/para-gustos-macetas">Leer
            m&Atilde;&iexcl;s</a></span>
          </div>
        </li>

        <li class="views-row views-row-2 views-row-even">
          <div class="views-field-field-imagen-miniatura-fid">
            <span class="field-content"><img height="57" width="67" class=
            "imagecache imagecache-lo_mas_leido_54_46 imagecache-default imagecache-lo_mas_leido_54_46_default"
            title="" alt="" src=
            "/sites/default/files/imagecache/lo_mas_leido_54_46/la_mesa_de_cultivo_ideal_0.jpg" /></span>
          </div>

          <div class="views-field-title">
            <span class="field-content"><a href=
            "/huerto-urbano/la-mesa-de-cultivo-ideal">La mesa de cultivo ideal</a></span>
          </div>

          <div class="views-field-teaser">
            <span class="field-content">Hace ya tiempo que la tendencia del Huerto Urbano
            est&Atilde;&iexcl; arraigando en las ciudades. Ante este nuevo...</span>
          </div>

          <div class="views-field-view-node">
            <span class="field-content"><a href=
            "/huerto-urbano/la-mesa-de-cultivo-ideal">Leer m&Atilde;&iexcl;s</a></span>
          </div>
        </li>

        <li class="views-row views-row-3 views-row-odd">
          <div class="views-field-field-imagen-miniatura-fid">
            <span class="field-content"><img height="57" width="67" class=
            "imagecache imagecache-lo_mas_leido_54_46 imagecache-default imagecache-lo_mas_leido_54_46_default"
            title="" alt="" src=
            "/sites/default/files/imagecache/lo_mas_leido_54_46/ojo_que_plantamos_1.jpg" /></span>
          </div>

          <div class="views-field-title">
            <span class="field-content"><a href=
            "/huerto-urbano/%C2%A1ojo-que-plantamos">&Acirc;&iexcl;Ojo, que
            plantamos!</a></span>
          </div>

          <div class="views-field-teaser">
            <span class="field-content">Al crear, mantener y disfrutar de nuestro huerto
            urbano debemos tener en cuenta ciertas medidas de...</span>
          </div>

          <div class="views-field-view-node">
            <span class="field-content"><a href=
            "/huerto-urbano/%C2%A1ojo-que-plantamos">Leer m&Atilde;&iexcl;s</a></span>
          </div>
        </li>

        <li class="views-row views-row-4 views-row-even views-row-last">
          <div class="views-field-field-imagen-miniatura-fid">
            <span class="field-content"><img height="57" width="67" class=
            "imagecache imagecache-lo_mas_leido_54_46 imagecache-default imagecache-lo_mas_leido_54_46_default"
            title="" alt="" src=
            "/sites/default/files/imagecache/lo_mas_leido_54_46/comprar_una_planta_3.jpg" /></span>
          </div>

          <div class="views-field-title">
            <span class="field-content"><a href=
            "/huerto-urbano/comprar-una-planta">Comprar una planta</a></span>
          </div>

          <div class="views-field-teaser">
            <span class="field-content">Podemos decidir entre comprar las semillas, la
            planta joven o la pl&Atilde;&iexcl;ntula (la planta peque&Atilde;&plusmn;a).
            Para...</span>
          </div>

          <div class="views-field-view-node">
            <span class="field-content"><a href="/huerto-urbano/comprar-una-planta">Leer
            m&Atilde;&iexcl;s</a></span>
          </div>
        </li>
      </ul>
    </div>

    <div class="item-list">
      <h3>Extras</h3>

      <ul>
        <li class="views-row views-row-1 views-row-odd views-row-first views-row-last">
          <div class="views-field-field-imagen-miniatura-fid">
            <span class="field-content"><img height="57" width="67" class=
            "imagecache imagecache-lo_mas_leido_54_46 imagecache-default imagecache-lo_mas_leido_54_46_default"
            title="" alt="" src=
            "/sites/default/files/imagecache/lo_mas_leido_54_46/como_identificar_una_planta_3.jpg" /></span>
          </div>

          <div class="views-field-title">
            <span class="field-content"><a href=
            "/huerto-urbano/como-identificar-una-planta">C&Atilde;&sup3;mo identificar
            una planta</a></span>
          </div>

          <div class="views-field-teaser">
            <span class="field-content">&Acirc;&iquest;En qu&Atilde;&copy; fijarse para
            identificar una planta, recordarla o describirla?
            &Acirc;&iquest;Cu&Atilde;&iexcl;les son...</span>
          </div>

          <div class="views-field-view-node">
            <span class="field-content"><a href=
            "/huerto-urbano/como-identificar-una-planta">Leer
            m&Atilde;&iexcl;s</a></span>
          </div>
        </li>
      </ul>
    </div>
  </div>

这是 jquery 演示示例：

<div id="tabs">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>

      <li><a href="#tabs-2">Proin dolor</a></li>

      <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>

    <div id="tabs-1">
      <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur
      nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper
      ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean
      tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis
      orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie
      erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt
      interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>

    <div id="tabs-2">
      <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut
      pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla,
      massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut
      dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit
      aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis.
      Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla.
      Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus
      pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel
      felis. Mauris consectetur tortor et purus.</p>
    </div>

    <div id="tabs-3">
      <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam
      vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem
      eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent
      per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim
      commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur
      lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>

      <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna.
      Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent
      blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra
      blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam
      scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi
      lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu
      tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus.
      Vivamus a libero vitae lectus hendrerit hendrerit.</p>
    </div>
  </div>

Answer 1

我的建议是将输出调整为更像示例。从语义的角度来看，它更合理，并且具有更好的后备功能，如示例中所示，如果 JavaScript 无法工作，列表项会提供指向内容部分的书签链接。

要查看其实际效果，请从示例页面中删除 .tabs() 调用并单击链接 - 在没有 JavaScript 运行的情况下，它是完美的功能。